Quick start - Astro

Astro ships zero JS by default - an island without client:* never hydrates, so initAnimations() never runs. Add client:load (or client:visible) to any island that contains .spawn-*/.scroll classes and re-init on astro:after-swap for View Transitions.

Without client:load the classes render but stay inert - expected.

Usage - Layout with View Transitions

---
// src/layouts/Base.astro
---
<html>
  <head><meta charset="utf-8" /></head>
  <body>
    <slot />
    <script>
      import { initAnimations } from 'gclass-anims'
      initAnimations()
      document.addEventListener('astro:after-swap', () => initAnimations())
    </script>
  </body>
</html>

Usage - Island

---
// src/components/Counter.jsx (any framework island)
---
<div class="appear scroll spawn-up">hello astro</div>

---
// src/pages/index.astro
import Counter from '../components/Counter.jsx'
---
<Counter client:load />
<!-- client:visible works too - animation starts when island scrolls into view -->

Gotcha - no client directive

If you put .spawn-up directly in index.astro (no island), Astro renders it statically. Wrap it in an island with client:load or add a page-level client:load script that calls initAnimations() after hydration.