gsap-tanstack-routerlisted

Build or review GSAP animation in TanStack Router projects for React, including TanStack Start: page transitions, enter and exit motion across client-side navigation, animated show and hide of conditional content, and scroll-driven effects. Use whenever a project on @tanstack/react-router or @tanstack/react-start needs any of these, even if GSAP is not named, and whenever an outro is cut off by navigation, an intro fails to replay on a param change, layout jank, interrupted animations, or cleanup matter. Covers useBlocker as the outro-before-navigation hook, Link interception, pendingComponent and pendingMs, useRouterState, router.subscribe events, Outlet and layout persistence, remountDeps, createFileRoute lifetimes, Link preload, viewTransition and defaultViewTransition, scrollRestoration, back and forward, and SSR with HeadContent, Scripts, and ScriptOnce. Not for Next.js (gsap-nextjs), React Router (gsap-react-router), React without a router (gsap-react), or isolated GSAP API questions.
ucsandman/claude-skills · ★ 5 · Web & Frontend · score 78

Install: claude install-skill ucsandman/claude-skills

# GSAP TanStack Router Every animated page or component runs through the same lifecycle: **mount → initial state → intro → settled → outro → end state → unmount** Mount and unmount belong to React. The five phases between them belong to your animation code and happen while the node exists. This skill covers getting those phases right when TanStack Router decides when route components mount, update in place, and unmount: navigation timing, blockers, pending UI, route reuse, interruptions, and cleanup. The user's request and the existing design decide how things look. TanStack Router waits for the destination's loaders before it swaps the tree, keeps a route component mounted when only its params or search change, and never unmounts a layout its child navigations share. Treat a param change as a new page lifecycle even though nothing mounts. See [Route lifetime](references/route-lifetime.md). ## Start with the project 1. Read repository instructions and the current code. 2. 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. 3. 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,