Scroll Magic Section Wipe height issue

Question

I have implemented section wipes to some success, the issue I'm facing is for the first section, my content breaks when taller than the browser height. This is not an issue for the subsequent sections.

Fiddle – 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);

Thats the Javascript I'm using, I think it's something to do with the fact that the first y: is -100% whereas all the others are -0%, but changing this value to anything other than the -100% moves the page completely.

Thanks,

Scroll Magic Section Wipe height issue

0 Answers0