GSAP Astro

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

Without <ClientRouter />, use gsap-vanilla for full document loads. With it, mount and unmount correspond to body swaps; module scripts, global listeners, timelines, and persisted elements can survive. Animation owns the five phases between swaps.

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. 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).
2. Find where <ClientRouter /> is: the shared head, some pages, or nowhere, and its fallback prop. Nowhere means gsap-vanilla, including CSS @view-transition.
3. Find which framework integrations render islands and which client:* directives are in use.
4. Check astro.config for prefetch and experimental.clientPrerender.