javascript - ScrollMagic と TimelineMax を使用した Lottie アニメーションの制御

Question

ScrollMagic を使用して、Lottie アニメーションの再生ヘッドを移動する TimelineMax を制御しようとしています。

したがって、ユーザーがスクロールすると、スクロールの速度と方向に応じてアニメーションが再生されます。私はとても近くにいて、効果を家に持ち帰るために少し助けが必要です.

まず、ライブラリを含めます

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js"></script>

それで...

  // init scrollmagic
  var controller = new ScrollMagic.Controller();

さて、アニメーションの設定...

  // 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.
  });

これは私が苦労しているところです：

  // Setup Timeline
  var lottieControl = new TimelineMax({ repeat: -1, yoyo: true }); // <-- don't loop and let the timeline go back and forth
  lottieControl.to({ frame:0 }, 1, { // <-- is this right? I'm telling the timeline to start at frame 0
    onUpdate:function(){
      animation.goToAndStop(Math.round(this.target.frame), true) // <-- move the playback head of the animation to the target frame that has been rounded and use frames not time (true)
    },
    ease:Linear.easeNone
  })

最後に、すべてを元に戻します...

  // Attach to scroll
  var lottieScene = new ScrollMagic.Scene({
        duration: '80%',
        offset: 1
    })
    .setPin("#header-scroll")
    .setTween(lottieControl)
    .addTo(controller);

私の人生では、goToAndStop方法を正しく使用しているかどうかはわかりません。御時間ありがとうございます。