gsap-vanillalisted

# GSAP Vanilla Every animated page or component runs through the same lifecycle: **mount → initial state → intro → settled → outro → end state → unmount** On a plain site the browser owns mount and unmount. A page mounts when its document parses and unmounts when the next document replaces it, and nothing survives that swap: not a timeline, not a variable, not a listener. The five phases between belong to your animation code. This skill covers getting them right without a framework: first paint, navigation timing, history, interruptions, and cleanup. 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. Find out how pages are produced: hand-written HTML, a static generator with no client framework, a bundler such as Vite with no UI framework, or a transition library such as Swup, Barba, or Taxi. If a component framework renders the pages, say this skill does not cover it and use that framework's skill. 3. Find out how GSAP loads: npm import, import map, or script tag. Keep it. 4. Find out how scripts run: inline, `defer`, or `type="module"`. This decides when the DOM exists and whether the page can paint before the script runs. 5. Check the target browsers. Cross-document View Transitions, `pageswap` and `pagereveal`, the Navigation API, and `blocking="render"` are not everywhere. Feature-detect each one instead of trusting memory, and make sure the site works with all of them