GSAP Next.js

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

Mount and unmount belong to React; animation owns the five phases between them. With cacheComponents, treat route hide as unmount and re-show as mount on preserved DOM.

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 the App Router. If the project uses the Pages Router, use version-matched Pages Router guidance instead of this skill.
2. 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).
3. Check the Next config for cacheComponents. It changes how long routes live.

Choose the engine