Quick start - Vanilla JS

Framework-agnostic, but this is the zero-framework path. Install the package, import initAnimations once the DOM is ready, then drive everything with class names - no per-element JS or config.

Usage

// ESM (bundler or <script type="module">)
import { initAnimations } from 'gclass-anims'

// wait for DOM if you are not using a bundler entry:
document.addEventListener('DOMContentLoaded', () => {
  initAnimations()
})

// or simply at the end of <body>:
initAnimations()

// CJS (Node, Jest, legacy bundlers)
const { initAnimations } = require('gclass-anims')
initAnimations()
// or direct path:
// const { initAnimations } = require('gclass-anims/dist/gclass.cjs')

html

<!-- then everything is class-driven -->
<div class="appear scroll spawn-up">reveals on scroll</div>
<div class="float">loops forever</div>
<button class="magnet click-expand">magnet + click</button>

Dual build: ESM is dist/gclass.esm.js (package.json:10 exports import) and CJS is dist/gclass.cjs (package.json:13 exports require). Both are built by vite.lib.config.js with gsap external and sideEffects: false for tree-shaking.

What's next

See Installation for requirements and Quick start for the class anatomy (.appear / .scroll + behaviour + tunables). Framework-specific guides - React, Vue, Svelte, Next.js, Vite - are scaffolded alongside this page and will replace their placeholders next.