Scrollmagic部分湿巾

Question

我需要任何有过scrollmagic.js经验的人的帮助

我正在尝试创建类似于此的内容： http://work.antonandirene.com/karimrashid/

滚动页面时各部分重叠。

我正在使用scrollmagic（http://scrollmagic.io/）

小提琴： http://jsfiddle.net/st86x71m/1/

我遇到的主要问题是在下一个面板变为可见之前允许高于100％的内容滚动。我有点解决这个问题，但有一些问题...

我的问题：

我需要在其他内容完成滚动后删除间隙，以便下一个面板显示其他内容位于其父级底部的时间，而不是现在的-100％。

此外，我需要弄清楚如何动态设置z-index，以便上一张幻灯片具有更高的z-index。我目前正在css中手动设置它们。

感谢任何帮助，

提前谢谢大家。 乔恩。

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>