gsap-astro

Add <ClientRouter /> to a shared layout, then play the outro inside event.loader in astro:before-preparation so the router waits for it. Set initial values in astro:after-swap and start the intro in astro:page-load, cleaning up the page's gsap.context in astro:before-swap.

Use transition:name and transition:animate for snapshot morphs, fades, or slides under ClientRouter. Use GSAP for live-DOM outros that hold the swap, interruptible sequences, split text, or scroll-linked motion, with one engine per element.

Module scripts run once per visit, not once per page, so setup must run from astro:page-load and be correct when run twice on the same body. Listeners on document and window also outlive pages, so register router listeners once and clean up per-page work in astro:before-swap.

Yes, but page-level selectors stop at astro-island; the framework owns that subtree. GSAP inside the island follows the framework's rules with the island root as scope, and its cleanup runs at astro:after-swap via astro:unmount.

Hidden intros need a bounded initialization deadline and per-owner recovery that reverts splits, kills owned timelines, and restores the readable settled state on timeout or setup failure. Never hide server content through unconditional CSS that a failed bundle cannot undo.

Use gsap-vanilla when the site has no <ClientRouter />, since every navigation is then a full document load. It also remains the baseline for browsers without View Transitions when the router's fallback prop is set to none.