React项目中GSAP ScrollTrigger滚动动画实现问题及ES模块加载警告求助

Hey 👋，看你在React项目里折腾GSAP ScrollTrigger的滚动动画，还试过AOS和react-on-scroll，现在卡壳了对吧？我帮你捋捋问题，顺便给点实用的解决思路~

首先看你贴的代码里有几个明显的小坑：

• 变量st没定义！gsap.utils.toArray(st)里的st应该是你要触发动画的元素选择器（比如.scroll-reveal这类类名），得先补上才能让GSAP找到目标元素
• 代码最后gsap.fr...明显是截断了，onLeave的逻辑没写完，我们先把基础逻辑补全再优化

下面给你一套React项目里正确使用GSAP ScrollTrigger的完整方案，亲测好使：

1. 先搞定依赖安装 #

确保你已经正确安装GSAP（现在ScrollTrigger已经包含在核心包，不用单独安装）：

npm install gsap
# 或者用yarn
yarn add gsap

2. React组件里的标准写法 #

React有组件生命周期，直接全局写GSAP代码容易遇到DOM还没挂载的问题，所以最好在useEffect里初始化动画，搭配useRef获取DOM元素更稳妥：

import { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

// 注册插件，全局做一次就行，也可以放在项目入口文件里
gsap.registerPlugin(ScrollTrigger);

function ScrollTextAnimation() {
  // 用ref获取容器，避免重复查询DOM
  const contentContainer = useRef(null);

  useEffect(() => {
    if (!contentContainer.current) return;

    // 选择容器内所有需要动画的元素，这里用.scroll-reveal类做标记
    const animateElements = gsap.utils.toArray(
      contentContainer.current.querySelectorAll('.scroll-reveal')
    );

    animateElements.forEach(elem => {
      ScrollTrigger.create({
        trigger: elem,
        start: 'top 80%', // 元素顶部到达视口80%位置时触发动画
        end: 'bottom 20%',
        markers: true, // 调试用的可视化标记，上线记得关掉
        // 进入视口时的动画
        onEnter: () => {
          gsap.fromTo(
            elem,
            { y: 100, autoAlpha: 0 },
            {
              duration: 1.25,
              y: 0,
              autoAlpha: 1,
              ease: 'back.out(1.7)', // 给back缓动加参数，动画更自然
              overwrite: 'auto'
            }
          );
        },
        // 离开视口时还原（可选，根据需求调整）
        onLeave: () => {
          gsap.to(elem, { y: 100, autoAlpha: 0, duration: 0.5 });
        },
        // 向上滚动回到视口时的动画
        onEnterBack: () => {
          gsap.fromTo(
            elem,
            { y: 100, autoAlpha: 0 },
            {
              duration: 1.25,
              y: 0,
              autoAlpha: 1,
              ease: 'back.out(1.7)',
              overwrite: 'auto'
            }
          );
        },
        // 向上滚动离开视口时还原
        onLeaveBack: () => {
          gsap.to(elem, { y: 100, autoAlpha: 0, duration: 0.5 });
        }
      });
    });

    // 组件卸载时销毁所有ScrollTrigger，避免内存泄漏
    return () => {
      ScrollTrigger.getAll().forEach(trigger => trigger.kill());
    };
  }, []);

  return (
    <div ref={contentContainer}>
      {/* 给需要动画的元素加上.scroll-reveal类 */}
      <div className="scroll-reveal">我是滚动时会出现的文本1</div>
      <div className="scroll-reveal">我是滚动时会出现的文本2</div>
      {/* 加个长占位元素让页面能滚动 */}
      <div style={{ height: '1000px' }}></div>
    </div>
  );
}

export default ScrollTextAnimation;

3. 常见问题排查 #

• ES模块加载警告：如果遇到这类警告，大概率是打包工具（Vite/Webpack）的优化问题。Vite用户可以在vite.config.js里添加：

  export default {
    optimizeDeps: {
      include: ['gsap', 'gsap/ScrollTrigger']
    }
  }
  

  Webpack用户则确保配置里支持ES模块导入，不要混用require和import。
• 动画不触发：打开markers: true看触发区域位置，调整start参数（比如改成top 90%让动画触发更早）；同时检查目标元素有没有被设置display: none或者被其他组件隐藏。
• Strict Mode重复渲染问题：React严格模式会让组件渲染两次，可能导致ScrollTrigger重复创建，开发阶段可以暂时关掉Strict Mode，或者确保清理函数正确销毁所有trigger。

如果还有具体的错误提示或者动画异常的细节，可以再补充出来，我再帮你针对性解决~

备注：内容来源于stack exchange，提问作者user24890768