Quick start - Next.js

The docs site itself is a Next.js App Router app! Re-call initAnimations() on pathname changes because the root layout persists across route navigations.

Usage - App Router (recommended)

html

// app/layout.js
import AnimInit from '@/Shared/animInit'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <AnimInit />
        {children}
      </body>
    </html>
  )
}

// Shared/animInit.js
"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
}

Pages Router

// pages/_app.js
import { useEffect } from 'react'
import { useRouter } from 'next/router'
import { initAnimations } from 'gclass-anims'

export default function App({ Component, pageProps }) {
  const { asPath } = useRouter()
  useEffect(() => { initAnimations() }, [asPath])
  return <Component {...pageProps} />
}

What's next

Mark elements you want to keep across navigations with .preserve (header, nav). All other .appear /.scroll elements replay per route.