Search code examples
javascriptjquerygsapscrollmagic

jQuery ScrollMagic Timeline Max not working

I'm playing around with Jan Paepke's brilliant scrollMagic and cannot seem to get some TimelineMax code actually working. As you scroll up the page, the numbered circles should sequentially fade 50%. From my code it looks like it should work but it's not. What am I doing wrong?

Here's a plunker of my experiment

I'm working from Petr Tichy's demo and a scrollMagic example

Here's the js: 

(function($) {

    var wh = window.innerHeight,
    $m = $('.m'),
    $c1 = $('.c1'),
    $c2 = $('.c2'),
    $c3 = $('.c3'),
    $c4 = $('.c4');

  // init
  var ctrl = new ScrollMagic.Controller();

        // build scene
        var circles = new TimelineMax();
            circles
            .to($c2, 1.5, {alpha: 0.5, ease: Cubic.easeOut})
            .to($c4, 1.5, {alpha: 0.5, delay:0.25})
            .to($c1, 1.5, {alpha: 0.5, delay:0.25})
            .to($c3, 1.5, {alpha: 0.5, delay:0.25});

    new ScrollMagic.Scene({
    triggerElement: $('.container2')[0],
    duration: '100', offset: -50
  })
  .setTween(circles)
  .addIndicators({name: "circlesIndicator"})
  .addTo(ctrl);

})(jQuery);

Here's the css: 

.container1{height:550px;width: 600px;position:relative;}
.container2{height:2000px;width: 600px;position:relative; }
.m{top:250px;left: 250px;width:150px;height:150px;position:absolute;}
.c1{top:400px;left: 100px;width:100px;height:100px;position:absolute;}
.c2{top:150px;left: 100px;width:100px;height:100px;position:absolute;}
.c3{top:400px;left: 450px;width:100px;height:100px;position:absolute;}
.c4{top:150px;left: 450px;width:100px;height:100px;position:absolute;}

Here's the html:

<head>
    <link rel="stylesheet" href="style.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.0/TweenMax.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.min.js"></script>

    <script src="script.js"></script>

  </head>

  <body>

    <div class="container1"><h1>Hola Plunkerz!</h1>
     <p>This is an animation test that begins when content scrolls into the viewport. 
     Therefore, please scroll down to see test, thanks!</p></div>

    <div class="container2">

      <div class="c1"><img src="http://i.imgur.com/y7HdEfn.png"></div>
      <div class="c2"><img src="http://i.imgur.com/s4A18qr.png"></div>
      <div class="m"><img src="http://i.imgur.com/kBaLqYH.png"></div>
      <div class="c3"><img src="http://i.imgur.com/NF5tdJN.png"></div>
      <div class="c4"><img src="http://i.imgur.com/M4xBAUS.png"></div>

    </div>    

  </body>
Solution

  • Doh I figured it out. The only problem is the JS file link <script src="script.js"></script> needs to appear below the html code just above the closing body tag (instead of between the head tags which is where I had it), or at least when I put it there it works :D