taste-gsap

GSAP is a scalpel, not a glitter gun. One clean pinned section beats nine parallax layers — and survives a code review.

1. ARCHITECTURE (The Non-Negotiable Shell)

• Wrap every page's animations in a single gsap.context(() => { ... }, rootElement) — it scopes selectors and gives you instant teardown.
• Gate everything through gsap.matchMedia():
  • (prefers-reduced-motion: no-preference) — all animation lives here. Reduced-motion users get the static, complete page.
  • (min-width: 768px) — heavy effects (pins, scrubs, per-character splits) desktop-only; small screens get fades or nothing.
• The matchMedia callback returns a cleanup function; on SPAs, call ctx.revert() on unmount.
• One timeline per section, named by section; never one giant global timeline with 40 tweens.
• Lenis (free, not ScrollSmoother): new Lenis({ duration: ~1.1, anchors: true }), pipe it to ScrollTrigger with lenis.on("scroll", ScrollTrigger.update) + gsap.ticker.add(t => lenis.raf(t * 1000)) + gsap.ticker.lagSmoothing(0). lenis.stop() during the preloader, lenis.start() after. Never smooth-scroll under reduced motion.

2. PIN & SCRUB HYGIENE (Where Agents Fail Loudest)