What problem does it solve? React Router has no leave hook, so routes unmount before exit animations can play, and server-rendered pages paint before GSAP can hide intro targets. This Skill provides the patterns to run full mount-to-unmount animation lifecycles—intros, outros, blockers, and cleanup—without breaking navigation, scroll, focus, or first-load performance. ## Core Features & Use Cases - Route transition control: Hold navigation with useBlocker or a transition-aware Link so outgoing pages play an outro before the router commits the new route. - Five-phase lifecycle: Apply the mount → initial state → intro → settled → outro → end state → unmount contract to pages, conditional components, and modal routes. - SSR-safe initialization: Hide intro targets with an inline root-attribute script, recover gracefully from failed bundles or stalled fonts, and protect LCP and indexing. - Use Case: Add a crossfade page transition to a React Router framework-mode app where the outgoing page fades out, proceed() releases the blocked navigation, and the incoming page animates in behind a cover while loaders finish. ## Quick Start Use the gsap-react-router skill to add GSAP page transitions with a blocker-based outro to this React Router app.
