Scroll down to animate horizontally >
gsap.to(".box-1", { y: -130, duration: 2, ease: "elastic", scrollTrigger: { trigger: ".box-1", containerAnimation: scrollTween, start: "left center", toggleActions: "play none none reset" } });Fire an animation at a particular spot...
box-1
gsap.to(".box-2", { y: -120, backgroundColor: "#1e90ff", ease: "none", scrollTrigger: { trigger: ".box-2", containerAnimation: scrollTween, start: "center 80%", end: "center 20%", scrub: true } });...or scrub it back & forth with the scrollbar
box-2
ScrollTrigger.create({ trigger: ".box-3", containerAnimation: scrollTween, toggleClass: "active", start: "center 60%" });Toggle a CSS class
box-3
ScrollTrigger.create({ trigger: ".green", containerAnimation: scrollTween, start: "center 65%", end: "center 51%", onEnter: () => console.log("enter"), onLeave: () => console.log("leave"), onEnterBack: () => console.log("enterBack"), onLeaveBack: () => console.log("leaveBack"), onToggle: self => console.log("active", self.isActive) });Use the rich callback system