document.addEventListener("DOMContentLoaded", function () { gsap.registerPlugin(ScrollTrigger); const textCol = document.querySelector(".text-col"); const text = document.querySelector(".reveal-text"); const words = text.innerText.split(" "); // wrap each word in a span text.innerHTML = words .map(word => `${word} `) .join(""); const spans = text.querySelectorAll("span"); const lastSpan = spans[spans.length - 1]; // last word "worldwide" // Word-by-word reveal animation gsap.to(spans, { scrollTrigger: { trigger: textCol, start: "top 80%", end: "bottom 65%", scrub: true, onUpdate: self => { // Change background when last word is visible (>90% of animation) const lastWordProgress = gsap.getProperty(lastSpan, "opacity"); if (lastWordProgress > 0.99) { textCol.style.backgroundColor = "#0091CF"; } else { textCol.style.backgroundColor = "#2A2A2B"; } } }, opacity: 1, y: 0, stagger: 0.045, ease: "power4.out" }); // overall paragraph fade gsap.to(text, { scrollTrigger: { trigger: textCol, start: "top 80%", end: "bottom 65%", scrub: true }, opacity: 1 }); });