javascript - ScrollMagic/TweenMax，多场景/断点的一条时间线

Question

我有相同的元素，我需要在滚动时为页面的不同部分设置动画（上下、左右等）。我所做的是为每个断点添加场景和时间线（如#one、#two、...、#six 等）以及附加到这些部分的一些动作。我尝试了 TweenLite.to，然后将其更改为 fromTo。

// ONE //
  let elementsTL = new TimelineMax({ paused: true })
  elementsTL.add(
    TweenLite.fromTo('.animation-elements .vertical-line-wrapper', 1.5, {
      top: '2%', ease: Expo.ease,
    }, {
      top: '95%', ease: Expo.ease,
    }),
    0,
  )
  new ScrollMagic.Scene({
    triggerElement: '#one',
    triggerHook: 0.9,
  })
    .setTween(elementsTL)
    .addIndicators({
      name: 'one',
    })
    .addTo(controller)



 // TWO //
  let elements2TL = new TimelineMax({ paused: true })
  elements2TL.add(
    TweenLite.fromTo('.animation-elements .vertical-line-wrapper', 1.5, {
      top: '95%', ease: Expo.ease,
    }, {
      top: '75%', ease: Expo.ease,
    }),
    0,
  )
  new ScrollMagic.Scene({
    triggerElement: '#two',
    triggerHook: 0.9,
  })
    .setTween(elements2TL)
    .addIndicators({
      name: 'two',
    })
    .addTo(controller)
.....

问题是如果我从最后一个快速滚动到第一个，那些元素会跳跃，我完全理解为什么。我可以有一个时间轴，我可以将动画附加到它并将其分解为部分（id）吗？在这里可以做什么？

标签： javascriptjquerygsapscrollmagic