Quick start - Svelte

Framework-agnostic - call initAnimations() inside onMount so it runs only in the browser; the engine then watches .appear and .scroll elements as the component tree mounts.

Usage - Svelte component

html

<script>
  import { onMount } from 'svelte'
  import { initAnimations } from 'gclass-anims'

  onMount(() => {
    initAnimations()
  })
</script>

<div class="appear scroll spawn-up">hello svelte</div>
<button class="magnet click-expand">magnet + click</button>

SvelteKit layout re-init

html

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

  onMount(() => {
    initAnimations()
    afterNavigate(() => initAnimations())
  })
</script>

<slot />

What's next

Add utility classes to markup - no Svelte actions or directives required. See quick-start-js for vanilla parity.