.color-changing-text > * { background-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.2) 0%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }gsap.registerPlugin(ScrollTrigger);const section = document.querySelector('.color-changing-text-section'); const texts = document.querySelectorAll('.color-changing-text h2');// Initial setup texts[0].style.webkitBackgroundClip = 'text'; texts[0].style.webkitTextFillColor = 'transparent'; texts[1].style.webkitBackgroundClip = 'text'; texts[1].style.webkitTextFillColor = 'transparent';// ScrollTrigger animation gsap.to(section, { scrollTrigger: { trigger: section, start: 'top 80%', end: '50% 50%', scrub: true, markers: false, onUpdate: (self) => { const progress = self.progress;// Update first line visibility if (progress 0.5) { const secondProgress = (progress - 0.5) * 2; // Scale second line's progress gsap.to(texts[1], { backgroundImage: `linear-gradient(90deg, #000 ${secondProgress * 100}%, rgba(0, 0, 0, .2) 0%)` }); } } } });$(".stickey_circle_wrap1").each(function (index) { let triggerElement = $(this); let targetElement = $(".circle2");let tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, start: "top 100%", end: "800px 100%", markers: false, scrub: 1 } }); tl.fromTo(targetElement, { width: "80%", height: "100%", borderRadius: "2em" }, { width: "100%", height: "100%", borderRadius: "0px", duration: 1 } ); });