ScrollMagic部分擦除错误的命令

Question

https://codepen.io/joshuajazleung/pen/OoWYXJ

var controller = new ScrollMagic.Controller();

// define movement of panels
var wipeAnimation = new TimelineMax()
  .fromTo(
    "section.panel.two",
    1,
    { y: "0%" },
    { y: "100%", ease: Linear.easeNone }
  ) 
  .fromTo(
    "section.panel.three",
    1,
    { y: "0%" },
    { y: "100%", ease: Linear.easeNone }
  ) 
  .fromTo(
    "section.panel.four",
    1,
    { y: "0%" },
    { y: "100%", ease: Linear.easeNone }
  ); 

// create scene to pin and link animation
new ScrollMagic.Scene({
  triggerElement: "#pinContainer",
  triggerHook: "onLeave",
  duration: "300%"
})
  .setPin("#pinContainer")
  .setTween(wipeAnimation)
  .addIndicators() // add indicators (requires plugin)
  .addTo(controller);

我正在按照scrollmagic网站的示例http://scrollmagic.io/examples/advanced/section_wipes_manual.html创建划像效果。我希望该部分从底部滚动到顶部。现在，第4部分位于顶部，滚动顺序错误，滚动时某些部分丢失。我做错了什么？