Quick start - React

The library is framework-agnostic - you only need to call initAnimations() once after mount and let the MutationObserver pick up .appear / .scroll elements as they render.

Usage - Client component / SPA root

import { useEffect } from 'react'
import { initAnimations } from 'gclass-anims'

function App() {
  useEffect(() => {
    initAnimations()
  }, [])

  return (
    <div className="appear scroll spawn-up">
      hello react
    </div>
  )
}

Next.js App Router variant

Call initAnimations() on every pathname change so new routes re-wire (see the docs site's Shared/animInit.js:6).

"use client"
import { useEffect } from 'react'
import { usePathname } from 'next/navigation'
import { initAnimations } from 'gclass-anims'

export default function AnimInit() {
  const pathname = usePathname()
  useEffect(() => { initAnimations() }, [pathname])
  return null
}

What's next

Once wired, add classes like .spawn-up, .float, .magnet directly to JSX className. No wrapper components needed. See quick-start-js for vanilla parity and Toggle & reduced motion for toggleAnimations().