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,
})

Rules

• Every pinned or scrubbed section must explain something — no scroll-jacking for the sake of it
• Test touch devices before committing to choreography-heavy storytelling
• Pair with Lenis when synchronized smooth scroll is part of the concept
• Do not drop Lenis into dense docs or dashboards
• Kill ScrollTrigger instances on component unmount in React