javascript - Scrollmagic Section Wipes -

i need has experience scrollmagic.js

i trying create similar this: http://work.antonandirene.com/karimrashid/

where sections overlap scroll page.

i using scrollmagic (http://scrollmagic.io/)

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

the main problem had allowing content higher 100% scroll before next panel becomes visible. have kinda fixed problems...

my issues:

i need remove gap after additional content has finished scrolling, next panel shows when additional content @ bottom of parent , not -100% now.

also need figure out how dynamically set z-index previous slide has higher z-index. setting them manually in css.

any appreciated,

thank 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 left    .to("section.panel .additionalcontent", 1, {      y: "-100%",      ease: linear.easenone    })    .fromto("section.panel.turqoise", 1, {      y: "0"    }, {      y: "-100%",      ease: linear.easenone    }) // in left    .fromto("section.panel.green", 1, {      y: "0"    }, {      y: "-100%",      ease: linear.easenone    }) // in right    .fromto("section.panel.bordeaux", 1, {      y: "0"    }, {      y: "0",      ease: linear.easenone    }); // in top    // create scene pin , 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>