Quick start - Vue

Framework-agnostic - just call initAnimations() in onMounted once the DOM is present; the engine's MutationObserver handles subsequent .appear mounts and .scroll triggers.

Usage - Composition API (SFC)

<script setup>
import { onMounted } from 'vue'
import { initAnimations } from 'gclass-anims'

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

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

Options API

import { initAnimations } from 'gclass-anims'

export default {
  mounted() {
    initAnimations()
  }
}

What's next

Class anatomy is the same as vanilla: behaviour (.spawn-up) + trigger (.appear, .scroll) + tunables (.time-1, .ease-back). See quick-start-js for the full breakdown.