ScollMagic Issue Fiddle 2.0

Basic forkable fiddle to showcase ScrollMagic issues.

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<div id="pinContainer">
    <section class="panel blue">	<b>ONE</b>

    </section>
    <section class="panel turqoise">	<b>TWO</b>

        <div class="additionalContent">
            <p>TEXT</p>
            <p>TEXT</p>
            <p>TEXT</p>
            <p>TEXT</p>
            <p>TEXT</p>
            <p>TEXT</p>
            <p>TEXT</p>
            <p>TEXT</p>
            <p>TEXT</p>
            <p>TEXT</p>
            <p>TEXT</p>
            <p>TEXT</p>
            <p>TEXT</p>
            <p>TEXT</p>
            <p>TEXT</p>
            <p>TEXT</p>
            <p>TEXT</p>
            <p>TEXT</p>
            <p>TEXT</p>
            <p>TEXT</p>
            <p>TEXT</p>
            <p>TEXT</p>
            <p>TEXT</p>
            <p>TEXT</p>
            <p>TEXT</p>
            <p>TEXT</p>
            <p>TEXT</p>
            <p>TEXT</p>
            <p>TEXT</p>
            <p>TEXT</p>
            <p>TEXT</p>
            <p>TEXT</p>
            <p>TEXT</p>
            <p>END</p>
        </div>
    </section>
    <section class="panel green">	<b>THREE</b>

    </section>
    <section class="panel bordeaux">	<b>FOUR</b>

    </section>
</div>

CSS

html, body {
    height: 100%;
    margin: 0;
}
#pinContainer {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.panel {
    height: 100%;
    width: 100%;
    position: absolute;
    text-align: center;
}
.panel .additionalContent {
    /*top:0;*/
    /*position: absolute;*/
}
.blue {
    background-color: #3883d8;
    z-index:10;
}
.turqoise {
    background-color: #38ced7;
    z-index:9;
}
.green {
    background-color: #22d659;
    z-index:8;
}
.bordeaux {
    background-color: #953543;
    z-index:7;
}
.panel > b {
    font-size: 15px;
    color: white;
    position: relative;
    display: block;
    height: 0;
    overflow: visible;
    top: 50%;
}

JavaScript

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

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

// define movement of panels
var wipeAnimation = new TimelineMax()
    .fromTo("section.panel.blue", 1, {
    y: "0"
}, {
    y: "-100%",
    ease: Linear.easeNone
}) // in from left
.to("section.panel .additionalContent", 1, {
    y: "-100%",
    ease: Linear.easeNone
})
    .fromTo("section.panel.turqoise", 1, {
    y: "0"
}, {
    y: "-100%",
    ease: Linear.easeNone
}) // in from left
.fromTo("section.panel.green", 1, {
    y: "0"
}, {
    y: "-100%",
    ease: Linear.easeNone
}) // in from right
.fromTo("section.panel.bordeaux", 1, {
    y: "0"
}, {
    y: "0",
    ease: Linear.easeNone
}); // in from top

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