gsap-sveltekitlisted

Build or review GSAP animation in SvelteKit projects on Svelte 5: page transitions, enter and exit motion across client-side navigation, animated show and hide of conditional content, and scroll-driven effects. Use whenever a SvelteKit project needs any of these, even if GSAP is not named, and whenever a page intro fails to replay, an outro is cut off by navigation, layout jank, interrupted animations, or cleanup matter. Covers beforeNavigate, afterNavigate, onNavigate, goto, +page.svelte and +layout.svelte lifetimes, runes and $effect cleanup, and choosing between GSAP, Svelte transition:, in: and out: directives, {#key} blocks, and View Transitions for a navigation effect. Not for Svelte components outside SvelteKit routing, which gsap-frameworks covers, or isolated GSAP API questions.
ucsandman/claude-skills · ★ 5 · Web & Frontend · score 78

Install: claude install-skill ucsandman/claude-skills

# GSAP SvelteKit Every animated page or component runs through the same lifecycle: **mount → initial state → intro → settled → outro → end state → unmount** Mount and unmount belong to Svelte. The five phases between them belong to your animation code and happen while the node exists. This skill covers getting those phases right when SvelteKit's router decides when pages mount, update in place, and unmount: navigation timing, page reuse, interruptions, and cleanup. The user's request and the existing design decide how things look. SvelteKit reuses components across navigation. A `+page.svelte` that stays on the same route with new params updates in place, and layouts persist through every child navigation. Treat a param change as a new page lifecycle even though nothing mounts. See [Page lifetime](references/page-lifetime.md). ## Start with the project 1. Read repository instructions and the current code. 2. 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`. 3. 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 navigat