GSAP(GreenSock)点击按钮控制动画播放/暂停功能失效问题

功能失效的核心是变量覆盖问题：

• 你在遍历.text元素创建时间线的forEach循环里，每次都会把新生成的timeline实例重新赋值给全局变量cT，循环结束后cT只会保存最后一个文本元素对应的时间线。
• 点击按钮时你仅控制了这最后一个时间线的暂停/播放状态，其余三个文本对应的时间线完全没有被操作，自然无法实现整体动画的状态切换。

把所有创建的时间线实例统一存入数组，点击按钮时遍历数组，同步修改所有时间线的播放状态即可，CSS和HTML部分无需调整。

修正后JS代码 #

// 存储所有文本动画的时间线实例
const timelines = [];

const changeText = (hold) => {
  const cText = gsap.utils.toArray('.text');
  gsap.set(cText, { autoAlpha: 1 });

  cText.forEach((obj, i) => {
    const cT = gsap.timeline({
      delay: 0.5 * i + hold * i,
      repeat: -1,
      repeatDelay: (cText.length - 1) * (0.5 + hold) - 0.5,
      defaults: {
        ease: 'none',
        duration: 0.5,
      },
    });
    cT.from(obj, { yPercent: -60, opacity: 0 });
    cT.to(obj, { yPercent: 60, opacity: 0 }, '+=' + hold);
    // 将当前时间线存入数组
    timelines.push(cT);
  });
};

changeText(3);

const pauseBtn = document.getElementById('pause');
pauseBtn.onclick = function () {
  // 统一切换所有时间线的暂停状态
  const targetPausedState = !timelines[0].paused();
  timelines.forEach(tl => tl.paused(targetPausedState));
  pauseBtn.innerHTML = targetPausedState ? 'Play' : 'Pause';
};

可选简化方案 #

如果页面上没有其他需要独立运行的GSAP动画，你也可以不用维护时间线数组，直接控制GSAP全局根时间线实现一键暂停/播放，点击逻辑可以简化为：

pauseBtn.onclick = function () {
  const globalTimeline = gsap.globalTimeline;
  globalTimeline.paused(!globalTimeline.paused());
  pauseBtn.innerHTML = globalTimeline.paused() ? 'Play' : 'Pause';
};

注意：这个方案会暂停页面上所有GSAP驱动的动画，如果页面存在其他不受该按钮控制的GSAP动效，优先使用前面存数组的方案。

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