Step 1Started scanning 4 sources.
Content
GSAP + ScrollTrigger
The industry-standard animation platform for complex timelines, scroll-driven narratives, and cross-surface choreography.
When to reach for GSAP over Motion
- Scroll-triggered pinning or scrubbing sections
- Multi-element orchestrated sequences with precise timing
- Mixed-surface animations (DOM + Canvas + WebGL)
- Complex SVG or path animations
- Anything that needs frame-perfect control across heterogeneous targets
Core API
- gsap.to / gsap.from / gsap.fromTo — single tweens
- gsap.timeline() — sequenced animation chains
- ScrollTrigger — ties animation progress to scroll position
- scrub — maps scroll position directly to tween progress
- pin — holds an element fixed while the user scrolls through a section
ScrollTrigger patterns
ScrollTrigger.create({
trigger: ".section",
start: "top center",
end: "bottom center",
scrub: true,
pin: true,
})
Common variants and integration notes
- Scrollable container (not the viewport): set
scroller
ScrollTrigger.create({
scroller: ".scroll-area", // element that actually scrolls
trigger: ".panel",
start: "top top",
end: "bottom top",
scrub: true,
})
- Custom smooth-scrolling libraries (Lenis, locomotive, etc.): use so GSAP maps to the library's scroll position instead of the native scroll