无法使Scrollmagic插件作为示例

Question

Link to wanted behavior (slide on scroll): http://scrollmagic.io/examples/advanced/section_slides_manual.html

I copied the source from the site but am having trouble reciprocating it's behavior. I know there are some css that is moving from the source but it seems to be more of a javascript issue that I can't figure out.

Fiddle Link: https://jsfiddle.net/zcgxxj44/

  $(function () { // wait for document ready // init var controller = new ScrollMagic.Controller(); // define movement of panels var wipeAnimation = new TimelineMax() // animate to second panel .to("#slideContainer", 0.5, {z: -150}) // move back in 3D space .to("#slideContainer", 1, {x: "-25%"}) // move in to first panel .to("#slideContainer", 0.5, {z: 0}) // move back to origin in 3D space // animate to third panel .to("#slideContainer", 0.5, {z: -150, delay: 1}) .to("#slideContainer", 1, {x: "-50%"}) .to("#slideContainer", 0.5, {z: 0}) // animate to forth panel .to("#slideContainer", 0.5, {z: -150, delay: 1}) .to("#slideContainer", 1, {x: "-75%"}) .to("#slideContainer", 0.5, {z: 0}); // create scene to pin and link animation new ScrollMagic.Scene({ triggerElement: "#pinContainer", triggerHook: "onLeave", duration: "500%" }) .setPin("#pinContainer") .setTween(wipeAnimation) .addIndicators({name: "1 (duration: 0)"}) // add indicators (requires plugin) .addTo(controller); }); 

 *{ margin:0px; padding:0px; box-sizing:border-box; } body{ position:relative; } #pinContainer { width: 100%; height: 100%; overflow: hidden; } #slideContainer { width: 400%; /* to contain 4 panels, each with 100% of window width */ height: 500px; background:red; } .panel { height: 100%; width: 25%; /* relative to parent -> 25% of 400% = 100% of window width */ float: left; background:blue; } .hola{ background:green; height:120vw; width:100vw;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/jquery.gsap.min.js"></script> <div class="hola"></div> <div id="pinContainer"> <div id="slideContainer"> <section class="panel blue"> <b>ONE</b> </section> <section class="panel turqoise"> <b>TWO</b> </section> <section class="panel green"> <b>THREE</b> </section> <section class="panel bordeaux"> <b>FOUR</b> </section> </div> </div> 

Answer 1

Below is the working example of the same.

 $(function() { // wait for document ready // init var controller = new ScrollMagic.Controller(); // define movement of panels var wipeAnimation = new TimelineMax() // animate to second panel .to("#slideContainer", 0.5, { z: -150 }) // move back in 3D space .to("#slideContainer", 1, { x: "-25%" }) // move in to first panel .to("#slideContainer", 0.5, { z: 0 }) // move back to origin in 3D space // animate to third panel .to("#slideContainer", 0.5, { z: -150, delay: 1 }) .to("#slideContainer", 1, { x: "-50%" }) .to("#slideContainer", 0.5, { z: 0 }) // animate to forth panel .to("#slideContainer", 0.5, { z: -150, delay: 1 }) .to("#slideContainer", 1, { x: "-75%" }) .to("#slideContainer", 0.5, { z: 0 }); // create scene to pin and link animation new ScrollMagic.Scene({ triggerElement: "#pinContainer", triggerHook: "onLeave", duration: "500%" }) .setPin("#pinContainer") .setTween(wipeAnimation) .addIndicators() // add indicators (requires plugin) .addTo(controller); }); 

 <link href="http://scrollmagic.io/css/examples.css" rel="stylesheet" /> <link href="http://scrollmagic.io/css/style.css" rel="stylesheet" /> <link href="http://scrollmagic.io/css/normalize.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://scrollmagic.io/js/examples.js"></script> <script src="http://scrollmagic.io/js/lib/modernizr.custom.min.js"></script> <script src="http://scrollmagic.io/js/lib/highlight.pack.js"></script> <script src="http://scrollmagic.io/js/examples.js"></script> <script src="http://scrollmagic.io/js/lib/greensock/TweenMax.min.js"></script> <script src="http://scrollmagic.io/scrollmagic/uncompressed/ScrollMagic.js"></script> <script src="http://scrollmagic.io/scrollmagic/uncompressed/plugins/animation.gsap.js"></script> <script src="http://scrollmagic.io/scrollmagic/uncompressed/plugins/debug.addIndicators.js"></script> <div id="content-wrapper"> <div id="example-wrapper"> <div class="scrollContent"> <section class="demo" id="section-slides"> <style type="text/css"> #pinContainer { width: 100%; height: 100%; overflow: hidden; -webkit-perspective: 1000; perspective: 1000; } #slideContainer { width: 400%; /* to contain 4 panels, each with 100% of window width */ height: 100%; } .panel { height: 100%; width: 25%; /* relative to parent -> 25% of 400% = 100% of window width */ float: left; } </style> <div id="pinContainer"> <div id="slideContainer"> <section class="panel blue"> <b>ONE</b> </section> <section class="panel turqoise"> <b>TWO</b> </section> <section class="panel green"> <b>THREE</b> </section> <section class="panel bordeaux"> <b>FOUR</b> </section> </div> </div> </section> </div> </div> </div>