Quick start - SvelteKit

SvelteKit layouts persist across routes - unlike plain Svelte Vite. Call initAnimations() in onMount and again on afterNavigate. Wrapping a layout in class="preserve" freezes it (uses Listeners.js:145 isPreserved) - remove it to re-animate.

Usage - SvelteKit layout

html

// src/routes/+layout.svelte
<script>
  import { onMount } from 'svelte'
  import { afterNavigate } from '$app/navigation'
  import { initAnimations } from 'gclass-anims'

  onMount(async () => {
    const { tick } = await import('svelte')
    await tick()
    initAnimations()
  })

  afterNavigate(async () => {
    const { tick } = await import('svelte')
    await tick()
    initAnimations()
  })
</script>

<slot />

SSR guard

AnimToggle.js:11 guards window.matchMedia with typeof window - vite build SSR bundle will not throw. No client:load equivalent needed.