GSAP TanStack Router

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

Mount and unmount belong to React; animation owns the five phases between them. TanStack Router preserves shared layouts and can reuse routes on parameter changes; pending UI and loaders also affect when the new page appears.

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 @tanstack/react-router. Next.js belongs to gsap-nextjs, React Router to gsap-react-router, React without a router to gsap-react. Solid Router is out of scope.
2. Read the installed @tanstack/react-router version and, when present, @tanstack/react-start. Prefer their bundled types over memory: node_modules/@tanstack/router-core/dist/esm/router.d.ts for RouterOptions, RouterState, and RouterEvents, node_modules/@tanstack/react-router/dist/esm/useBlocker.d.ts for the blocker, node_modules/@tanstack/history/dist/esm/index.d.ts for history actions. The TanStack/router repository's docs/router/ and docs/start/ are the source of truth. The loading architecture changed during the 1.16x and 1.17x releases; RouterState.isTransitioning is gone from router-core 1.171.2x, and useBlocker is still marked experimental.
3. Tell file-based routes (createFileRoute, routeTree.gen.ts, __root.tsx) from code-based routes (createRoute, createRootRoute). The lifecycle is the same; only where route options live differs.
4. Tell TanStack Start (SSR, a root document shell with HeadContent and Scripts) from a client-only Vite app (RouterProvider rendered into a div). Client-only apps paint nothing before React, so they need no pre-paint rule. Check ssr per route, defaultSsr, spa.enabled, and prerendering.
5. Read the router options: defaultPreload, defaultPendingComponent, defaultPendingMs, defaultPendingMinMs, defaultViewTransition, scrollRestoration, defaultStaleTime, defaultRemountDeps. Each changes when pages mount and what the user sees while they load.