如何在单个ScrollMagic场景中实现多个GSAP Tween动画？

嘿，刚接触GSAP和ScrollMagic的时候，确实容易陷入“一个动画对应一个场景”的误区，其实咱们有更简洁的方式在单个场景里搞定多个动画，下面给你两种实用的方法：

方法一：使用GSAP时间线（推荐） #

这是最灵活的方案，用GSAP的timeline把多个Tween整合成一个时间线，再绑定到ScrollMagic场景上，能精准控制动画的顺序、延迟和并行关系。

// 初始化ScrollMagic控制器
var controller = new ScrollMagic.Controller();

// 创建GSAP时间线，整合多个动画
var animationTimeline = gsap.timeline();
// 第一个动画：#animate1淡入+左移
animationTimeline.to("#animate1", 0.4, { opacity: 1, left: 0 })
  // 第二个动画：#animate2在第一个动画结束后延迟0.2s开始淡入+左移
  .to("#animate2", 0.4, { opacity: 1, left: 0, delay: 0.2 })
  // 如果你想让两个动画同时开始，就用position参数指定为0
  // .to("#animate2", 0.4, { opacity: 1, left: 0 }, 0);

// 创建单个ScrollMagic场景，绑定时间线
var singleScene = new ScrollMagic.Scene({ triggerElement: "#trigger1" })
  .setTween(animationTimeline) // 把整段时间线传给场景
  .reverse(false) // 关闭反向动画
  .addTo(controller); // 一定要把场景添加到控制器才会生效！

方法二：多次调用setTween() #

如果你的多个动画是同时触发的简单动画，也可以在同一个场景里多次调用setTween()，不过这种方式没法控制动画的先后顺序，适合不需要时序的场景：

var controller = new ScrollMagic.Controller();

var singleScene = new ScrollMagic.Scene({ triggerElement: "#trigger1" })
  .setTween("#animate1", 0.4, { opacity: 1, left: 0 })
  .setTween("#animate2", 0.4, { opacity: 1, left: 0 })
  .reverse(false)
  .addTo(controller);

两种方法里更推荐时间线方案，因为它能应对复杂的动画时序需求，后期维护起来也更清晰～

内容的提问来源于stack exchange，提问作者Ken Ryan