ScrollMagic - Section Wipes - only works right after scrolling down and then up

Question

I'm using ScrollMagic on my site and I want it to work like this MaterializeCSS Startup Theme

My problem is, that after the initial load the different containers are overlapping. After I scroll down completely and the up again, it works fine.

To understand what I mean, I created a Pen.

This is my JS:

jQuery(function () { // wait for document ready
// init
var controller = new ScrollMagic.Controller();

// define movement of panels
var wipeAnimation = new TimelineMax()
    .fromTo("section.panel.turqoise", 1, {x: "-100%"}, {x: "-50%", ease: Linear.easeNone}) 
    .fromTo("section.panel.turqoise", 1, {x: "-50%"}, {x: "-100%", ease: Linear.easeNone}) 
    .fromTo("section.panel.green",    1, {x:  "100%"}, {x: "50%", ease: Linear.easeNone})  
    .fromTo("section.panel.green",    1, {x:  "50%"}, {x: "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);
});

Maybe someone can help me.. Thanks!

Answer 1

Fixed it by myself.

Problem was, that I used the function .fromTo() multiple times on the same element, so at initial load it places every object in the right place and ontop of the previous one.

Changing the code to following fixed my problem, because it slides FROM the side TO the middle, and then TO the side again.

    // define movement of panels
    var wipeAnimation = new TimelineMax()
    .fromTo("section.panel.turqoise", 1, {x: "-100%"}, {x: "-50%", ease: Linear.easeNone}) 
    .to("section.panel.turqoise", 1, {x: "-100%", ease: Linear.easeNone}) 
    .fromTo("section.panel.green",    1, {x:  "100%"}, {x: "50%", ease: Linear.easeNone})  
    .to("section.panel.green",    1, {x: "100%", ease: Linear.easeNone});