title: Controlling a Lottie Animation with ScrollMagic and TimelineMax
body: <p>I'm trying to use ScrollMagic to control a TimelineMax which moves the playhead of a Lottie animation.</p>
  
  <p>So, as the user scrolls, the animation plays relative to the speed and direction of the scroll. I'm so close and need a little help to bring the effect home.</p>
  
  <p>First, I include my Libraries</p>
  
  <pre><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Then...</p>
  
  <pre><code>  // init scrollmagic
    var controller = new ScrollMagic.Controller();
  </code></pre>
  
  <p>Now, the animation setup...</p>
  
  <pre><code>  // Manage Animation
    var animation = bodymovin.loadAnimation({
      container: document.getElementById('lottie'), // Required
      path: '/static/animations/animation.json', // Required
      renderer: 'svg', // Required
      loop: false, // Optional
      autoplay: false, // Optional
      name: "Welcome to Awesomeness", // Name for future reference. Optional.
    });
  </code></pre>
  
  <p>This is where I'm struggling:</p>
  
  <pre><code>  // Setup Timeline
    var lottieControl = new TimelineMax({ repeat: -1, yoyo: true }); // &lt;-- don't loop and let the timeline go back and forth
    lottieControl.to({ frame:0 }, 1, { // &lt;-- is this right? I'm telling the timeline to start at frame 0
      onUpdate:function(){
        animation.goToAndStop(Math.round(this.target.frame), true) // &lt;-- move the playback head of the animation to the target frame that has been rounded and use frames not time (true)
      },
      ease:Linear.easeNone
    })
  </code></pre>
  
  <p>Finally, bring it all back together...</p>
  
  <pre><code>  // Attach to scroll
    var lottieScene = new ScrollMagic.Scene({
          duration: '80%',
          offset: 1
      })
      .setPin("#header-scroll")
      .setTween(lottieControl)
      .addTo(controller);
  </code></pre>
  
  <p>For the life of me, I can't see if I'm using the <code>goToAndStop</code> method right or not. Thanks for your time.</p>