title: scrollmagic tweens animation
body: <p>I previously used superscrollorama and i started to use scrollmagic but i cant manage to get some divs properly animated. The first 2 divs are fine but the last two, once i scroll down, doesn't animate. also i would like to add a little offset to the 2nd div but don't know how, the syntax is a bit different from Superscrollorama.</p>
  
  <pre><code>var controller;
      $(document).ready(function($) {
          // init controller
          controller = new ScrollMagic();
      });
  
  $(document).ready(function($) {
          // build tween
          var tween =  new TimelineMax ()
              .add([
                  TweenMax.from(".biopic", 0.5, {top: '150',opacity:0}),
                  TweenMax.from(".title", 0.5, {left: '150',opacity:0}),
                  TweenMax.from(".gallery-wrap", 0.5, {top: '150',opacity:0}),
                  TweenMax.from(".title2", 0.5, {right: '150',opacity:0}),
              ]);
  
          // build scene
          var scene = new ScrollScene({triggerHook: "onEnter", offset: 150 })
                          .setTween(tween)
                          .addTo(controller);
      });
  </code></pre>