GSAP text animation with mask color fails for alternate backgrounds

Question

Greetings to everyone that's smarter than me,

As the title states, I know just enough to be dangerous. When things get complicated, I hide in the corner, crying.

The concept: animate text on the page as the user scrolls using GSAP in Webflow. I'm using the line mask option to reveal the text. This works for all the black text on a white background using a combo class. Example Text

The problem: I need to do the same thing for white text on a black background but I haven't been able to accomplish this.

I've tried using another script and/or variables but this is where my mentor (Google) and I hit the code wall.

The website. The ABOUT ME section is what I need to get up and running.

Below is the current script and libraries.

<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>

Any help would be greatly appreciated.

Thanks!