gsap-nextjslisted

Build or review GSAP animation in Next.js App Router projects: page transitions, enter and exit motion, animated show and hide of conditional content, and scroll-driven effects. Use whenever a Next.js App Router project needs any of these, even if GSAP is not named, and whenever layout jank, interrupted animations, or cleanup matter. Also use to choose between GSAP and React View Transitions for a navigation effect. Not for Pages Router, non-Next.js sites, or isolated GSAP API questions.
ucsandman/claude-skills · ★ 5 · Web & Frontend · score 78

Install: claude install-skill ucsandman/claude-skills

# GSAP Next.js 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: stable layout, navigation timing, interruptions, and cleanup. The user's request and the existing design decide how things look. If the Next config has `cacheComponents` on, the router hides old routes instead of unmounting them. Treat hide as unmount and re-show as mount. See [Route lifetime under cacheComponents](references/app-router-navigation.md#route-lifetime-under-cachecomponents). ## Start with the project 1. Read repository instructions and the current code. 2. Confirm the App Router. If the project uses the Pages Router, say this skill does not cover it and stop. 3. Read the installed Next.js version. Prefer its bundled docs in `node_modules/next/dist/docs/` over memory. Version gates: `onNavigate` and `useLinkStatus` (15.3), `<ViewTransition>` and `transitionTypes` (16.2), `<Activity>` route preservation when `cacheComponents` is enabled (16.0, opt-in). 4. Check the Next config for `cacheComponents`. It changes how long routes live. 5. Look at layouts, navigation components, global CSS, accessibility conventions, tests, and any animation library already in use. 6. Keep the project's package manager, language, file layout, styling, and c