gsap.registerPlugin(ScrollTrigger, SplitText);
let split = new SplitText("p", { type: "lines" });

function makeItHappen() {
  split.lines.forEach((target) => {
    gsap.to(target, {
      backgroundPositionX: 0,
      ease: "none",
      scrollTrigger: {
        trigger: target,
        markers: false,
        scrub: 0.5,
        start: "top-=64 center",
        end: "bottom center"
      }
    });
  });
}

let someDelay = gsap.delayedCall(0.2, newTriggers).pause();
window.addEventListener("resize", () => someDelay.restart(true));

function newTriggers() {
  ScrollTrigger.getAll().forEach((trigger) => {
    trigger.kill();
  });
  split.split();
  makeItHappen();
}

makeItHappen();

.text {
  width: 100% !important;
}
.text > p > div {
  background: linear-gradient(
    to right,
        rgba(255, 255, 255, 1) 50%,
    rgba(115, 115, 115, 1) 50%
  );
  background-size: 200% 100%;
  background-position-x: 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;

  line-height: 1.2; 
  /*   outline: 6px dotted teal; */
  font-size: 50px;
/*    display: block-inline !important;  */
}