GSAP文本遮罩动画在交替背景下失效问题求助

架构老林

2026-6-29

解决方案：黑色背景下的GSAP滚动触发逐字符文本动画

你的核心问题在于当前脚本里的bg和fg颜色是硬编码固定值，无法适配不同背景色的文本容器。通过给不同场景的文本容器添加区分类，就能动态切换动画的起始和目标颜色，实现黑色背景下的白色文本动画效果。

步骤1：给Webflow文本容器添加区分类

在ABOUT ME区域（黑色背景的文本模块），给带有.text-split类的容器额外添加一个类，比如.light-mode-text。

步骤2：修改GSAP脚本适配颜色

更新你的脚本，根据元素是否包含.light-mode-text类来设置对应的颜色参数：

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.1/ScrollTrigger.min.js"></script>
<script src="https://unpkg.com/split-type"></script>

<script>
gsap.registerPlugin(ScrollTrigger);

const splitTypes = document.querySelectorAll(".text-split");

splitTypes.forEach((element, i) => {
  // 根据类名判断颜色方案
  const isLightMode = element.classList.contains('light-mode-text');
  const bg = isLightMode ? "#000000" : "#F1F1F1";
  const fg = isLightMode ? "#FFFFFF" : "#000000";

  const text = new SplitType(element, { types: "chars" });

  gsap.fromTo(
    text.chars,
    {
      color: bg
    },
    {
      color: fg,
      duration: 1,
      stagger: 0.05, // 调小间隔值让逐字符动画更流畅
      opacity: 1,
      scrollTrigger: {
        trigger: element,
        start: "top 80%",
        end: "top 35%",
        scrub: true,
        markers: false,
        toggleActions: "play play reverse reverse"
      }
    }
  );
});
</script>