React中GSAP SplitText插件导入失败求助：需复刻文字揭示动画

一、正确安装GSAP及SplitText插件 #

• 先安装GSAP核心库：

npm install gsap

• 若使用付费版SplitText（GSAP Club会员专属），需先在本地配置GSAP私有npm源（登录GSAP账户获取访问令牌），再执行安装：

npm install @gsap/split-text

• 若使用免费旧版SplitText，可通过CDN引入或安装第三方封装包，但更推荐官方付费版以获取最新功能与技术支持。

二、正确导入并注册SplitText #

• 安装@gsap/split-text付费插件的导入方式：

import gsap from "gsap";
import SplitText from "@gsap/split-text";

// 必须注册插件才能使用
gsap.registerPlugin(SplitText);

• 若使用GSAP核心包中包含的旧版SplitText，导入路径需调整为：

import gsap from "gsap";
import SplitText from "gsap/dist/SplitText";

gsap.registerPlugin(SplitText);

三、复刻目标文字揭示效果的React代码示例 #

以下是对应目标效果的完整React实现：

import React, { useEffect, useRef } from "react";
import gsap from "gsap";
import SplitText from "@gsap/split-text"; // 根据实际安装情况调整导入路径

gsap.registerPlugin(SplitText);

const TextReveal = () => {
  const textRef = useRef(null);

  useEffect(() => {
    // 将文本分割为单个字符
    const splitText = new SplitText(textRef.current, {
      type: "chars",
      charsClass: "split-char"
    });

    // 创建动画时间线
    const tl = gsap.timeline({
      repeat: -1, // 无限循环
      repeatDelay: 1
    });

    // 初始隐藏所有字符
    gsap.set(splitText.chars, { opacity: 0, y: 20 });

    // 逐个字符淡入上移
    tl.to(splitText.chars, {
      opacity: 1,
      y: 0,
      stagger: 0.05,
      duration: 0.6,
      ease: "power2.out"
    })
    // 延迟1秒后逐个淡出下移
    .to(splitText.chars, {
      opacity: 0,
      y: -20,
      stagger: 0.03,
      duration: 0.4,
      ease: "power2.in"
    }, "+=1");

    // 组件卸载时清理动画与DOM结构
    return () => {
      tl.kill();
      splitText.revert();
    };
  }, []);

  return (
    <div className="text-container">
      <h1 ref={textRef} className="reveal-text">
        Hello, GSAP SplitText!
      </h1>
    </div>
  );
};

export default TextReveal;

配套CSS样式：

.text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #000;
}

.reveal-text {
  font-size: 4rem;
  color: #fff;
  font-family: Arial, sans-serif;
}

.split-char {
  display: inline-block;
}

注意事项 #

• 必须调用gsap.registerPlugin(SplitText)，否则插件功能无法生效。
• 使用付费插件时，需确保已正确配置GSAP私有npm源并持有有效会员令牌，否则无法完成包的安装。
• 组件卸载时调用splitText.revert()可还原原始文本结构，避免DOM残留问题。

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