如何合并两个GSAP函数，实现ScrollTrigger联动多元素动画？

你可以通过GSAP Timeline实现同一个ScrollTrigger控制多个元素的动画，既能复用触发配置，又能保证动画同步执行。

修正后的代码 #

const anim_img = document.querySelectorAll('.info__block_img');
const anim_text = document.querySelectorAll('.info__block_text');

for (let i = 0; i < anim_text.length; i++) {
  // 创建时间线并绑定ScrollTrigger
  gsap.timeline({
    scrollTrigger: {
      trigger: anim_text[i],
      markers: true,
      start: '-40% center',
      end: 'center center',
      scrub: 1
    }
  })
  // 添加图片动画
  .to(anim_img[i], {
    scale: 1,
    opacity: 1
  })
  // 添加文本动画，第二个参数0表示和上一个动画同时启动
  .to(anim_text[i], {
    margin: 0,
    opacity: 1
  }, 0);
}

关键说明 #

• Timeline的作用：把多个动画整合到一个时间线中，只需给时间线配置一次ScrollTrigger，所有子动画都会共享这个触发逻辑，避免重复配置。
• 同步执行动画：第二个.to()方法里的, 0参数，让文本动画和图片动画在时间线的0时刻同时启动，保证两者动画同步触发；如果需要先后执行，去掉该参数即可。

另一种简化方式（适合多元素有共同属性的场景） #

如果两个元素有大量共同动画属性，也可以直接把多个元素放在同一个.to()的目标参数里：

for (let i = 0; i < anim_text.length; i++) {
  gsap.to([anim_img[i], anim_text[i]], {
    scrollTrigger: {
      trigger: anim_text[i],
      markers: true,
      start: '-40% center',
      end: 'center center',
      scrub: 1
    },
    opacity: 1, // 两个元素共同的属性统一设置
    // 针对不同元素的单独属性，用回调函数处理
    onUpdate: () => {
      anim_img[i].style.scale = '1';
      anim_text[i].style.margin = '0';
    }
  })
}

不过这种方式可读性不如Timeline，更适合属性高度重合的场景。

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