gsap-astrolisted

Build or review GSAP animation in Astro projects: page transitions under the ClientRouter (formerly ViewTransitions), an outro that finishes before the swap through astro:before-preparation, cleanup in astro:before-swap, initial state on the incoming document, setup that rehooks on astro:page-load, transition:persist and persisted islands, choosing between transition:animate and GSAP per element, back and forward, prefetch, scroll and focus, animated show and hide, and scroll-driven effects. Use whenever an Astro project needs any of these, even if GSAP is not named, and whenever animations vanish, duplicate, or leak after client-side navigation. Also use to recognize an Astro site without ClientRouter as a plain multi-page site and hand it to gsap-vanilla. Not for React, Vue, or Svelte apps outside Astro, which have their own skills, or isolated GSAP API questions.
ucsandman/claude-skills · ★ 5 · Web & Frontend · score 78

Install: claude install-skill ucsandman/claude-skills

# GSAP Astro Every animated page or component runs through the same lifecycle: **mount → initial state → intro → settled → outro → end state → unmount** Astro renders pages to HTML on the server. Without `<ClientRouter />` the browser owns mount and unmount and the site is a plain multi-page site: everything in `gsap-vanilla` applies unchanged, including first paint, `pageswap` and `pagereveal`, the bfcache, and prerendering. With `<ClientRouter />` the document persists and the router swaps `<head>` and `<body>` in place: mount is the swap, unmount is the next swap, and module scripts, listeners, and timelines survive both. The five phases between belong to your animation code. This skill covers what Astro changes: where the outro runs, what survives a swap, what runs again, and what must be cleaned up. 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. Read the installed Astro version. Read `node_modules/astro/dist/transitions/router.js`, `swap-functions.js`, and `node_modules/astro/components/ClientRouter.astro` before trusting memory; the package ships no changelog, so check the release notes for that version. Version gates: `<ClientRouter />` (5.0; `<ViewTransitions />` in 4.x, removed in 6.0), lifecycle events with `loader` and `newDocument` (3.6), form navigation (4.0), `transition:persist-props` and `data-astro-rerun` (4.5), `swapFunctions` (4.15). 3. Find where `<C