如何彻底销毁GSAP动画并重置其引发的所有DOM变更？

要实现彻底清除GSAP动画并将DOM恢复到初始化前的状态，需要覆盖动画实例清理、样式重置、pin-spacer移除三个核心环节，以下是具体步骤：

1. 清理所有GSAP及关联插件实例 #

• 清除全局时间线的所有动画：

  gsap.globalTimeline.clear();
  

• 销毁所有GSAP实例（包括嵌套时间线）：

  gsap.globalTimeline.getChildren(true, true, true).forEach(instance => {
    instance.kill();
  });
  

• 若使用了ScrollTrigger，销毁所有滚动触发实例并清除关联样式：

  ScrollTrigger.getAll().forEach(st => st.kill(true));
  

• 若使用了其他插件（如Draggable），同步清理对应实例：

  Draggable.getAll().forEach(drag => drag.kill());
  

2. 恢复DOM元素的原始样式 #

GSAP的kill()方法仅停止动画，不会重置样式到初始值，需通过以下方式处理：

• 提前备份初始样式（推荐）：在初始化GSAP前，为需要动画的元素保存计算后的样式：

  // 初始化前备份
  const animatedElements = document.querySelectorAll('.animated-element');
  animatedElements.forEach(el => {
    el.dataset.initialStyle = JSON.stringify(getComputedStyle(el));
    el.dataset.initialClasses = el.className;
  });
  

• 销毁时还原样式：解析备份数据，重置元素样式和类名：

  animatedElements.forEach(el => {
    // 还原样式
    const initialStyle = JSON.parse(el.dataset.initialStyle);
    Object.assign(el.style, initialStyle);
    // 还原类名
    el.className = el.dataset.initialClasses;
    // 清除备份数据
    delete el.dataset.initialStyle;
    delete el.dataset.initialClasses;
  });
  

• 若无需保留其他内联样式，可快速清除所有GSAP添加的内联样式：

  gsap.set('.animated-element', { clearProps: 'all' });
  

3. 移除ScrollTrigger创建的pin-spacer元素 #

pin功能生成的pin-spacer容器需要手动处理，将被固定的元素放回原位置后删除容器：

document.querySelectorAll('.pin-spacer').forEach(spacer => {
  // 获取被固定的子元素
  const pinnedEl = spacer.firstElementChild;
  if (pinnedEl) {
    // 将元素移回spacer之前的位置
    spacer.parentNode.insertBefore(pinnedEl, spacer);
  }
  // 删除spacer容器
  spacer.remove();
});

4. 清理GSAP内部状态 #

• 重置ScrollTrigger的全局状态：

  ScrollTrigger.reset();
  

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