GSAP React Router

mount → initial state → intro → settled → outro → end state → unmount

Mount and unmount belong to React; animation owns the five phases between them. React Router has no leave hook: hold navigation with a blocker or intercept it before it starts. Parameter changes can reuse the route element.

Keep the requested look and existing project conventions. Add GSAP/plugins only as needed; do not replace the chosen animation library unless asked.

This skill decides when motion runs. For what moves, and for a feel such as premium or playful, also load the animaxxing skill when it is installed: its recipes and its guide to finding the vibe plug into this lifecycle.

Start with the project

Read repository instructions, existing animation, layouts, navigation, CSS, accessibility conventions, and checks. Then:

1. Confirm React Router 7 or later and its mode. Framework mode has react-router.config.ts, routes.ts, root.tsx, and HydratedRouter in entry.client.tsx. Data mode has createBrowserRouter and RouterProvider. Declarative mode has BrowserRouter and no loaders, no useNavigation, and no blocker. A Remix 2 app uses the same hooks from @remix-run/react; say so and map the names.
2. Read the installed version from node_modules/react-router/package.json. The package ships its docs/, CHANGELOG.md, and .d.ts files in dist/; prefer them over memory. Version gates: useBlocker (6.19), viewTransition and useViewTransitionState (6.27), Link mask and useTransitions (7.15), middleware (7.9 behind future.v8_middleware, always on in 8). Version 8 is ESM-only, needs React 19.2, and drops react-router-dom: RouterProvider and HydratedRouter come from react-router/dom.
3. In framework mode check ssr and prerender in react-router.config.ts. Server-rendered and prerendered pages paint HTML before hydration. ssr: false ships an index.html holding only the root route and its HydrateFallback, so route content renders after hydration and needs no pre-paint rule. Data and declarative mode without server rendering are the same.

Choose the engine