How to create a highlighted text on scroll with GSAP in Elementor

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/split-type@0.3.4/umd/index.min.js"></script>

<script>

gsap.registerPlugin(ScrollTrigger);

const split = new SplitType(".cool-split h2", {
  types: "words, chars",
});

const tl = gsap
  .timeline({
    scrollTrigger: {
      trigger: ".about",
      start: "top 10%",
      end: "+=125%",
      scrub: 0.5,
    },
  })
  .set(
    split.chars,
    {
      duration: 0.3,
      color: "white",
      stagger: 0.1,
    },
    0.1
  );
</script>

.cool-split h2 {
  width: 85%;
  color: rgba(255, 255, 255, 0.125);
  transition: color 0.3s;
}