GSAP Nuxt

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

Mount and unmount belong to Vue; animation owns the five phases between them. During a Nuxt page leave, the component is torn down while its root element remains until done. The transition hooks (css: false) must own the outro independently of component cleanup.

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 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.
2. 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).
3. Read nuxt.config: ssr, srcDir, app.pageTransition, app.layoutTransition, app.keepalive, experimental.viewTransition, future.compatibilityVersion. Nuxt 4 puts pages/, layouts/, middleware/, plugins/, composables/, app.vue, and router.options.ts under app/; Nuxt 3 keeps them at the root. ~/ resolves to the source directory in both.

Choose the engine