如何使GSAP中Overlay时间线的起始点与主时间线text2阶段对齐？

现有需求：使用GSAP的ScrollTrigger插件实现滚动驱动动画，主时间线tl包含多个文本元素的过渡动画，其中标记了text2阶段；需要让Overlay对应的时间线tl2在主时间线的text2阶段启动时同步开始动画。

当前实现代码：

gsap.registerPlugin(ScrollTrigger)
const tl = gsap.timeline({
  scrollTrigger: {
    trigger: '.section',
    markers: true,
    pin: true, // 激活时固定触发元素
    start: 'top top', // 触发元素顶部碰到视口顶部时开始
    end: 'bottom top', // 触发元素底部碰到视口顶部时结束
    scrub: true
  }
})

tl.to('.text-1', { x: -400 });
tl.to('.text-2', { opacity: 1 }, "<");
tl.to('.text-2', { opacity: 0 }, "text2");
tl.to('.text-3', { opacity: 1 }, "<");
tl.to('.text-3', { opacity: 0 });
tl.to('.text-4', { opacity: 1 }, "<");

const tl2 = gsap.timeline({
  scrollTrigger: {
    trigger: '.section',
    start: 'top top', // 触发元素顶部碰到视口顶部时开始
    end: 'bottom top', // 触发元素底部碰到视口顶部时结束
    scrub: true
  }
})
tl2.to('.overlay', { opacity: 0.2 })

gsap.timeline()
        .add(tl)
        .add(tl2)

问题分析 #

当前代码中两个时间线各自绑定了ScrollTrigger，并且通过新时间线先后添加tl和tl2，导致tl2会在tl完全结束后才开始动画，无法实现和text2阶段同步启动的需求。

解决方案 #

不需要给tl2单独设置ScrollTrigger，直接将Overlay的动画嵌套到主时间线tl的text2标记点即可，主时间线的ScrollTrigger会驱动所有嵌套动画的进度。

方案一：直接在主时间线添加Overlay动画

gsap.registerPlugin(ScrollTrigger)
const tl = gsap.timeline({
  scrollTrigger: {
    trigger: '.section',
    markers: true,
    pin: true,
    start: 'top top',
    end: 'bottom top',
    scrub: true
  }
})

tl.to('.text-1', { x: -400 });
tl.to('.text-2', { opacity: 1 }, "<");
tl.to('.text-2', { opacity: 0 }, "text2");
// 在text2标记点同步启动Overlay动画
tl.to('.overlay', { opacity: 0.2 }, "text2");
tl.to('.text-3', { opacity: 1 }, "<");
tl.to('.text-3', { opacity: 0 });
tl.to('.text-4', { opacity: 1 }, "<");

方案二：嵌套tl2到主时间线的text2位置

如果需要保留tl2独立时间线的结构，可以用add方法将其插入到主时间线的指定标记点：

gsap.registerPlugin(ScrollTrigger)
const tl = gsap.timeline({
  scrollTrigger: {
    trigger: '.section',
    markers: true,
    pin: true,
    start: 'top top',
    end: 'bottom top',
    scrub: true
  }
})

tl.to('.text-1', { x: -400 });
tl.to('.text-2', { opacity: 1 }, "<");
tl.to('.text-2', { opacity: 0 }, "text2");
tl.to('.text-3', { opacity: 1 }, "<");
tl.to('.text-3', { opacity: 0 });
tl.to('.text-4', { opacity: 1 }, "<");

// 移除tl2的ScrollTrigger，因为主时间线已经驱动
const tl2 = gsap.timeline()
tl2.to('.overlay', { opacity: 0.2 })

// 将tl2插入到主时间线的text2标记点
tl.add(tl2, "text2");

两种方案都能实现Overlay动画和主时间线的text2阶段同步启动的效果，其中方案一更简洁，适合逻辑简单的场景；方案二更灵活，适合Overlay动画包含多个步骤的情况。

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