title: AngularJS working ScrollMagic
body: <p>I have a site using jQuery and ScrollMagic. When the user scroll to a specific element ScrollMagic captures that and trigger an animation using TweenMax. </p>
  
  <p>In jQuery the code looks like this </p>
  
  <pre><code>var scene = new ScrollScene({
      triggerElement: '#animation_start'
  }).setTween(TweenMax.from('#demo', 0.5 ,{opacity:0}));
  
  controller.addScene([scene]);
  </code></pre>
  
  <p>In the new version of the site, there is a part of the page that contains much more complex animation that can be handled easily by AngularJS' two way data blinding and I want to take advantage of that. I am new to AngularJS, but I have written a couple apps in AngularJS. I am trying to wrap my head around what's the right way to approach this. Essentially, this is what I want to happen. When the user scroll to <strong>#animation_start</strong>, the AngularJS powered animation starts. In pseudo jQuery, it looks something like this:</p>
  
  <pre><code>var scene = new ScrollScene({
      triggerElement: '#animation_start'
  }).setTween(**AMAZING ANIMATION TO BE HANDLED BY ANGULARJS**);
  
  controller.addScene([scene]);
  </code></pre>
  
  <p>I know I am thinking the wrong way because I am still thinking jQuery. How should I approach this problem and how should I structure the code?</p>
  
  <p>Any help is appreciated. </p>