gsap-nuxtlisted

Build or review GSAP animation in Nuxt 3 and Nuxt 4 projects: page and layout transitions through the pageTransition and layoutTransition JavaScript hooks, enter and exit motion, animated show and hide of conditional content, and scroll-driven effects across NuxtPage and NuxtLink navigation. Use whenever a Nuxt project needs any of these, even if GSAP is not named, and whenever definePageMeta, Vue Transition, onEnter, onLeave, page transitions, route transitions, keepalive, back and forward, layout jank, interrupted animations, or cleanup on navigation matter. Also use to choose between GSAP, Vue Transition CSS, and Nuxt's experimental View Transitions for a navigation effect. Not for plain Vue without Nuxt, which gsap-frameworks covers, and not for isolated GSAP API questions.
ucsandman/claude-skills · ★ 5 · Web & Frontend · score 78

Install: claude install-skill ucsandman/claude-skills

# GSAP Nuxt Every animated page or component runs through the same lifecycle: **mount → initial state → intro → settled → outro → end state → unmount** Mount and unmount belong to Vue. The five phases between them belong to your animation code and happen while the node exists. Nuxt adds a twist: `<NuxtPage>` wraps every page in Vue's `<Transition>` and `<Suspense>`, so the page component is torn down the moment its outro starts and only the root element lives on until `done` is called. This skill covers getting the five phases right under that model: hydration, navigation timing, page keys, interruptions, and cleanup. The user's request and the existing design decide how things look. ## Start with the project 1. Read repository instructions and the current code. 2. Confirm Nuxt with a `pages/` directory. If the project is plain Vue with Vue Router and no Nuxt, say this skill does not cover it and use `gsap-frameworks`. 3. Read the installed Nuxt, Vue, and Vue Router versions from `node_modules`. Prefer the installed types and their JSDoc (`node_modules/@nuxt/schema`, `node_modules/nuxt/dist`, `node_modules/@vue/runtime-core/dist`, `node_modules/vue-router/dist`) and that version's docs over memory. Version gates: `onPrehydrate` (3.12), `useRuntimeHook` (3.14), the `app/` source directory (4), view transition types (4.4), `prefetch` in the `<NuxtLink custom>` slot (4.5). 4. Read `nuxt.config`: `ssr`, `srcDir`, `app.pageTransition`, `app.layoutTransition`, `app.keepalive`,