document.addEventListener("DOMContentLoaded", function() { gsap.registerPlugin(ScrollTrigger); let tl = gsap.timeline({ scrollTrigger: { trigger: "#hero-pin-section", start: "top top", end: "+=3000", pin: true, scrub: 1 } }); tl.to(".slide-1", { opacity: 0, y: -50, duration: 1 }); tl.fromTo(".slide-2", { opacity: 0, y: 50 }, { opacity: 1, y: 0, duration: 1 }); tl.to(".slide-2", { opacity: 0, y: -50, duration: 1 }, "+=0.5"); tl.fromTo(".slide-3", { opacity: 0, y: 50 }, { opacity: 1, y: 0, duration: 1 }); tl.to("#hero-pin-section", { backgroundScale: 1.1, duration: 3 }, 0); });