求助：NextJS中GSAP加载动画在页面重载时无效果

以下是针对你遇到问题的具体排查和解决步骤：

1. 给useGSAP添加依赖数组 #

useGSAP默认会在组件每次渲染时执行，若不指定依赖数组，可能在textRef还未绑定到DOM元素时就触发动画，导致动画无效。需将textRef加入依赖数组，确保仅当DOM元素挂载后才执行动画：

useGSAP(() => {
  gsap.from(textRef.current, {
    y: 400,
    duration: 1 // 显式设置动画时长，避免因默认时长过短不易察觉
  });
}, [textRef]); // 添加依赖数组

2. 完善动画参数并增加安全判断 #

默认gsap.from的动画时长为0.5秒，可能因速度过快被忽略，建议显式配置时长和缓动效果；同时增加textRef.current的存在判断，避免空值报错：

useGSAP(() => {
  if (textRef.current) {
    gsap.from(textRef.current, {
      y: 400,
      duration: 1.5,
      ease: "power2.out" // 配置自然的缓动曲线
    });
  }
}, [textRef]);

3. 确认Loading组件的挂载时机 #

你提到设置了5秒人工延迟，需确保Loading组件在这5秒内处于持续挂载状态。若通过路由或页面逻辑控制组件显示，要避免组件在延迟期间被提前卸载，否则动画无法正常执行。

4. 检查依赖版本兼容性 #

确保gsap与@gsap/react版本匹配，建议安装最新稳定版避免兼容性问题：

npm install gsap@latest @gsap/react@latest

修改后的完整代码 #

"use client";
 
import React, { useRef } from "react";
import gsap from "gsap";
import { useGSAP } from "@gsap/react";
 
gsap.registerPlugin(useGSAP);
 
export default function Loading() {
  const textRef = useRef(null);
 
  useGSAP(() => {
    if (textRef.current) {
      gsap.from(textRef.current, {
        y: 400,
        duration: 1.5,
        ease: "power2.out"
      });
    }
  }, [textRef]);
 
  return (
    <div className="flex justify-center items-center min-h-screen">
      <h1 ref={textRef} className="text-2xl">
        Loading...
      </h1>
    </div>
  );
}

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