gsap-scrolltriggerlisted

<!-- last-verified: 2026-07 --> # GSAP + ScrollTrigger Defer duration/easing/stagger choices to `motion-design-principles` — this skill is the scroll-driven implementation layer. ## 1. 2025: GSAP is 100% free After the Webflow acquisition, **all of GSAP is free**, including **ScrollTrigger, SplitText, and MorphSVG** — plugins that used to require a paid Business/Club GreenSock license. The old "GSAP is great but the good plugins are paywalled" objection no longer applies; don't route around ScrollTrigger for licensing reasons. ## 2. Core API ```js import gsap from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); // one-shot tween gsap.to(".box", { x: 200, duration: 0.4, ease: "power2.out" }); // sequenced timeline — properties fire in order, can overlap with position params gsap.timeline() .to(".a", { opacity: 1, duration: 0.3 }) .to(".b", { x: 100, duration: 0.3 }, "<0.1"); // start 0.1s after previous starts ``` ScrollTrigger attaches to any tween or timeline via the `scrollTrigger` option — it doesn't replace `gsap.to()`/`gsap.timeline()`, it drives them: ```js gsap.to(".panel", { scrollTrigger: { trigger: ".panel", start: "top top", end: "+=1000", scrub: true, // ties animation progress directly to scroll position pin: true, // pins .panel in place while the scroll range plays out toggleActions: "play pause resume reverse", // enter/leave/enter-back/leave-back }, x: 3