Quick start - Vite

Vite is a bundler, not a framework - gclass-anims is framework-agnostic and works with any Vite template. Import and call initAnimations() once from your entry module.

Usage - Vanilla Vite entry

// main.js (Vite entry)
import { initAnimations } from 'gclass-anims'

initAnimations()

// index.html then just uses classes:
 // <div class="appear scroll spawn-up">hello vite</div>

Usage - Vite + framework (React / Vue / Svelte)

Use the same initAnimations() call as the standalone framework guide, just imported from the Vite entry or the framework root component. For example, Vite + React:

// src/main.jsx
import React, { useEffect } from 'react'
import ReactDOM from 'react-dom/client'
import { initAnimations } from 'gclass-anims'
import App from './App.jsx'

function Root() {
  useEffect(() => { initAnimations() }, [])
  return <App />
}

ReactDOM.createRoot(document.getElementById('root')).render(<Root />)

Compatibility

Works with any bundler (Vite, Webpack, Turbopack, esbuild). The package ships dual ESM + CJS (package.json:6 main ./dist/gclass.cjs, :7 module ./dist/gclass.esm.js, :10 exports import/require) built by vite.lib.config.js (formats es + cjs, external gsap). It is tree-shakable with sideEffects: false and prepublishOnly: build. If you use another bundler, the same import { initAnimations } entry works - for CJS use require('gclass-anims') or require('gclass-anims/dist/gclass.cjs'). Vite-specific guidance here is just for the dev server / HMR setup. Any ES-module or CJS environment should be compatible.