Scrollmagic Section Wipes

Question

I need help from anyone who has experience with scrollmagic.js

I am trying to create something similar to this: http://work.antonandirene.com/karimrashid/

where the sections overlap as you scroll the page.

I am using scrollmagic (http://scrollmagic.io/)

Fiddle: http://jsfiddle.net/st86x71m/1/

The main problem I had was allowing content that is higher than 100% to scroll before the next panel becomes visible. I have kinda fixed this but with some problems...

My Issues:

I need to remove the gap after the additional content has finished scrolling, so that the next panel shows when additional content is at the bottom of its parent and not -100% as it is now.

Also I need to figure out how to dynamically set the z-index so the previous slide has a higher z-index. I am currently setting them manually in css.

Any help is appreciated,

Thank you all in advance. Jon.

---

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

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%;
        }

<script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/TweenMax.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
    <script type="text/javascript" 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>