javascript - Scrollmagic セクション ワイプ

Question

scrollmagic.js の経験がある人からの助けが必要です

私はこれに似たものを作成しようとしています: http://work.antonandirene.com/karimrashid/

ページをスクロールするとセクションが重なる場所。

スクロールマジックを使用しています ( 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>