Motion should explain hierarchy, not decorate emptiness. GSAP is still the most predictable tool when CSS alone fights scroll, stagger, or timeline sequencing.
GSAP: when CSS is not enough
Use CSS for hovers, simple fades, and `prefers-reduced-motion` fallbacks. Reach for GSAP when you need ScrollTrigger pinning, staggered reveals, morphing SVG paths, or a master timeline that syncs hero + nav + stats.
- Register ScrollTrigger once; `kill()` on route change in SPAs
- Use `gsap.context()` in Vue `onMounted` for automatic cleanup
- Respect reduced motion: `matchMedia` to disable scrub timelines
Smooth scroll: Lenis + GSAP
Lenis (or similar) normalizes wheel scroll; pair with ScrollTrigger by proxying scroll position. Marketing portfolios and SaaS landings feel “premium” without jank — but test on low-end Android; disable smooth scroll if FPS drops.
Design toolchain (not only GSAP)
- Figma — layout, components, dev handoff; variables for color/spacing tokens
- Spline / Rive — lightweight 3D or vector motion exported to web
- Lottie — After Effects animations for icons and loaders (`lottie-web`)
- Rive — interactive state machines when Lottie is too linear
- Tailwind — speed; GSAP animates transforms Opacity, not class names in a loop
If the animation does not help scan the page in three seconds, cut it.