GSAP SvelteKit

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

Mount and unmount belong to Svelte; animation owns the five phases between them. SvelteKit reuses pages on parameter changes and preserves shared layouts, so a new page lifecycle need not mean a new node.

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 SvelteKit with Svelte 5 in runes mode. Plain Svelte without SvelteKit routing belongs to gsap-frameworks. For Svelte 4 or legacy mode, say so and map $effect advice onto onMount and onDestroy.
2. Read the installed @sveltejs/kit and svelte versions. Prefer their bundled types over memory: node_modules/@sveltejs/kit/types/index.d.ts documents every navigation object, and node_modules/svelte/types/index.d.ts the runes and lifecycle exports. Version gates: onNavigate (1.24), $app/state (2.12; use $app/stores before), to.scroll on navigation targets (2.51), prefersReducedMotion in svelte/motion (5.7), {@attach} (5.29).
3. Check svelte.config.js, page options (ssr, csr, prerender), data-sveltekit-preload-data on body in src/app.html, and links marked data-sveltekit-reload. A page with csr = false has no client router and no navigation hooks; a reload link is a full document load. Treat both as plain documents.

Choose the engine