React页面刷新后GSAP动画异常，如何修复并实现ScrollTrigger？

一、修复刷新后动画停留在初始位置的问题 #

问题原因 #

gsap.from() 是从指定起始状态动画到元素的默认渲染状态，但在React中，若组件重新渲染（比如页面刷新）时，GSAP动画实例未被正确清理，或是严格模式下useEffect重复执行，可能导致动画状态残留，最终停在起始位置。

解决方案 #

1. 清理动画实例

在useEffect的返回函数中销毁GSAP动画，避免残留实例干扰：

useEffect(() => {
  // 创建并保存动画实例
  const animation = gsap.from(head_txt_ref.current, {
    duration: 0.8,
    y: "50px",
  });

  // 组件卸载/重新渲染时清理动画
  return () => animation.kill();
}, []);

2. 使用fromTo()明确状态（更稳妥）

如果元素默认样式受CSS优先级影响，改用fromTo()明确起始和结束状态，避免歧义：

useEffect(() => {
  const animation = gsap.fromTo(
    head_txt_ref.current,
    { y: "50px" }, // 起始状态
    { duration: 0.8, y: "0px" } // 结束状态（对应元素默认位置）
  );
  return () => animation.kill();
}, []);

3. 处理React严格模式（可选）

若项目开启了React严格模式（开发环境下useEffect会执行两次），可临时关闭index.js中的<StrictMode>标签，避免动画重复触发导致的异常。

二、实现ScrollTrigger滚动触发动画 #

步骤1：导入并注册ScrollTrigger #

确保已安装GSAP（npm install gsap），在组件中导入并注册插件：

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

// 注册ScrollTrigger插件
gsap.registerPlugin(ScrollTrigger);

步骤2：配置滚动触发动画 #

修改useEffect中的动画，添加scrollTrigger配置项，实现滚动到指定位置时触发动画：

useEffect(() => {
  const animation = gsap.from(head_txt_ref.current, {
    duration: 0.8,
    y: "50px",
    // ScrollTrigger核心配置
    scrollTrigger: {
      trigger: head_txt_ref.current, // 触发动画的目标元素
      start: "top 80%", // 触发时机：元素顶部进入视口80%位置
      toggleActions: "play none none reverse", // 滚动行为：进入播放、离开无、再次进入无、再次离开倒放
      markers: true // 开启调试标记（上线前可删除）
    }
  });

  return () => animation.kill();
}, []);

ScrollTrigger关键参数说明 #

• trigger：指定触发动画的DOM元素
• start：定义触发动画的滚动位置，格式为"元素位置 视口位置"，比如"top 80%"表示元素顶部到达视口80%高度时触发
• toggleActions：控制滚动到不同位置时的动画行为，四个值依次对应：进入视图、离开视图、再次进入、再次离开的动作（可选值：play, pause, resume, reverse, restart, reset, complete, none）
• markers：开启后会在页面显示触发位置的标记，方便调试

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