带有遮罩颜色的 GSAP 文本动画对于备用背景失败

Question

向所有比我聪明的人问好，

正如标题所说，我所知道的就足够危险了。当事情变得复杂的时候，我就躲在角落里哭。

概念：当用户使用 Webflow 中的 GSAP 滚动时，为页面上的文本添加动画效果。我正在使用线条蒙版选项来显示文本。这适用于使用组合类的白色背景上的所有黑色文本。

问题：我需要对黑色背景上的白色文本执行相同的操作，但我无法完成此操作。

我尝试过使用其他脚本和/或变量，但这就是我和我的导师（Google）遇到代码墙的地方。

网站。 “关于我”部分是我需要启动和运行的部分。

下面是当前的脚本和库。

<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((char, i) => {
  const bg = "#F1F1F1";
  const fg = "#000000";

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

  gsap.fromTo(
    text.chars,
    {
      color: bg
    },
    {
      color: fg,
      duration: 1,
      stagger: 1,
      opacity: 1,
      scrollTrigger: {
        trigger: char,
        start: "top 80%",
        end: "top 35%",
        scrub: true,
        markers: false,
        toggleActions: "play play reverse reverse"
      }
    }
  );
});
</script>

任何帮助将不胜感激。

谢谢！

Answer 1

您在 Webflow 中使用 GSAP 和 ScrollTrigger 在用户滚动时为文本设置动画的方法是正确的。要解决黑色背景上白色文本的问题，您可以采用类似的方法，但背景 (

bg

) 和前景 (

fg

) 颜色的颜色值相反。以下是如何调整脚本以适应这两种情况：

1. 为需要黑色背景动画上的白色文本的元素分配一个区分类或属性。例如，假设您为这些元素添加一个类

   .text-split-inverse

   。

2. 修改您的脚本以检查此类并基于它应用适当的颜色值。这样，您就可以使用单个脚本处理白底黑字和黑底白字。

这是包含此逻辑的脚本的更新版本：

<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, .text-split-inverse");

splitTypes.forEach((char, i) => {
  const isInverse = char.classList.contains('text-split-inverse');
  const bg = isInverse ? "#000000" : "#F1F1F1"; // Black background for inverse
  const fg = isInverse ? "#FFFFFF" : "#000000"; // White text for inverse

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

  gsap.fromTo(
    text.chars,
    {
      color: bg
    },
    {
      color: fg,
      duration: 1,
      stagger: 0.05, // Adjusted for a more natural animation, feel free to change
      opacity: 1,
      scrollTrigger: {
        trigger: char,
        start: "top 80%",
        end: "top 35%",
        scrub: true,
        markers: false,
        toggleActions: "play play reverse reverse"
      }
    }
  );
});
</script>

关键调整：

• 类检查：脚本现在检查元素是否具有

  .text-split-inverse

  类，以确定是否应使用反转配色方案。
• 交错值：我已将

  stagger

  值调整为

  0.05

  ，以获得更平滑的动画效果。您可以根据自己的喜好进行调整。

通过利用这种方法，您可以维护一个干净且可维护的脚本，该脚本可以处理两种文本颜色场景，而无需重复代码。这还可以使您的 Webflow 项目更有条理，并允许将来更轻松地更新或更改。

如果您遇到任何问题或有更多疑问，请随时提问。快乐设计！