Here is where your presentation begins
+ //
+ This helper function even works with the "containerAnimation" feature as seen here!
+ Click the button below to scroll this page to the exact spot where the red section's tween starts.
+
+
+
+{`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...
+
+{`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
+
+{`ScrollTrigger.create({
+ trigger: ".box-3",
+ containerAnimation: scrollTween,
+ toggleClass: "active",
+ start: "center 60%"
+});`}
+
+ Toggle a CSS class
+
+{`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
+Here are a few caveats to keep in mind:
+ease: "none").containerAnimation.Here is where your presentation begins
+//Lightweight interface. Heavyweight intelligence
+ + +