滚动魔术部分擦拭高度问题

Question

我已经实现了部分擦除以取得一定的成功，我面临的问题是第一部分，当我的内容高于浏览器高度时，我的内容就会中断。对于后面的部分，这不是问题。

提琴– https://jsfiddle.net/apspencer/qsubj5ka/1/

console.clear();
console.log("ScrollMagic v%s loaded", ScrollMagic.version);


//add pannel# to each  panel
$(".panel").each(function(i) {
  $(this).addClass("panel" + (i + 1));
});

// how many panels
var numPanels = $('.panel').length;

// Add z-index and calulate tween durations
var orderedPanels = [];
var duration = [];
for (var i = 0; i < numPanels; i++) {
	// generate CSS for z-index of each panel, negative numbers ascending
  orderedPanels.push(".panel" + (i + 1) + " {z-index: " + (i + 1) + ";} ");
  // Calulate tween duration for each panel based on height
  duration.push(($(".panel" + (i+1)).height()/200));
}
// Add CSS for z-index of each panel to the head
$("<style id='panelZOrder' type='text/css'>" + (orderedPanels.join("")) + "</style>").appendTo("head");

// init
var controller = new ScrollMagic.Controller();

// define movement of panels
var wipeAnimation = new TimelineLite()
  .fromTo(".panel1", duration[0], {
    y: "-100%",
    boxShadow: "0px 0px 0px 0px #000"
  }, {
    y: "-100%",
    boxShadow: "0px 0px 200px 200px #000",
    ease: Linear.easeNone
  }).fromTo(".panel2", duration[1], {
    y: "-0%",
    boxShadow: "0px 0px 0px 0px #000"
  }, {
    y: "-100%",
    boxShadow: "0px 0px 200px 200px #000",
    ease: Linear.easeNone
  }).fromTo(".panel3", duration[2], {
    y: "-0%",
    boxShadow: "0px 0px 0px 0px #000"
  }, {
    y: "-100%",
    boxShadow: "0px 0px 200px 200px #000",
    ease: Linear.easeNone
  }).fromTo(".panel4", duration[3], {
    y: "-0%",
    boxShadow: "0px 0px 0px 0px #000"
  }, {
    y: "-100%",
    boxShadow: "0px 0px 200px 200px #000",
    ease: Linear.easeNone
  }).fromTo(".panel5", duration[4], {
    y: "-0%"
  }, {
    y: "-100%",
    ease: Linear.easeNone
  });


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

那是我正在使用的Javascript，我认为这与以下事实有关：第一个y：是-100％，而所有其他y是-0％，但是将此值更改为-100％以外的任何值完全移动页面。

谢谢