What problem does it solve? Animation on plain HTML sites often breaks at page boundaries: content flashes before intros, outros get skipped on back/forward navigation, the bfcache restores broken states, and failed scripts leave pages blank. This Skill provides a complete lifecycle contract (mount, initial state, intro, settled, outro, end state, unmount) so GSAP animation on vanilla sites stays readable, interruptible, and recoverable. ## Core Features & Use Cases - Full page lifecycle management: Covers page intros/outros, component show/hide, scroll effects, and conditional presence with explicit phase tracking and cleanup via gsap.context. - Navigation model guidance: Supports full document loads, cross-document View Transitions (pageswap/pagereveal), and same-document fetch/swap routers like Swup, Barba, or Taxi. - Initialization and recovery contract: Pre-paint hiding rules, bounded initialization deadlines, and per-owner recovery so a blocked bundle or failed setup never leaves hidden content. - Use Case: You are adding a fade-and-slide page transition to a static site. The Skill guides you to set initial state before first paint, intercept link clicks for the outro, handle bfcache restores without replaying intros, and verify reduced-motion and no-JavaScript fallbacks. ## Quick Start Use the gsap-vanilla skill to add a page intro and outro transition to my plain HTML and JavaScript site.
