next-wow

Scroll-triggered Animate.css animations for React and Next.js. Inspired by WOW.js, built on IntersectionObserver.

Install

npm i next-wow

animate.css is included as a dependency and pulled in via the stylesheet.

Usage

"use client" // required in Next.js App Router

import { useWOW } from "next-wow"
import "next-wow/styles.css"

export function AnimationProvider() {
  useWOW({
    once: false,           // replay when scrolling back
    refreshTrigger: null,  // e.g. usePathname() in Next.js
  })
  return null
}

Markup:

<div className="wow fadeInUp" data-wow-delay="0.3s" data-wow-duration="1s">
  Hello
</div>

{/* Prefixed Animate.css v4 names also work */}
<div className="wow animate__bounceIn">World</div>

API — useWOW(options)

| Option | Type | Default | Description | |--------|------|---------|-------------| | boxClass | string | "wow" | Class that marks animatable elements | | animateClass | string | "animate__animated" | Base class added when playing | | offset | number | 0 | Extra rootMargin (px) on top/bottom | | mobile | boolean | true | If false, skip when UA matches /Mobi/ | | live | boolean | true | Observe elements added after mount | | callback | (el: HTMLElement) => void | null | Called when an animation starts | | scrollContainer | HTMLElement \| null | null | Custom scroll root; null = viewport | | once | boolean | true | Animate once, or reset/replay when fully out of view | | refreshTrigger | string \| number \| null | null | Rebuild observers when this value changes (e.g. pathname) |

Also exported: ANIMATIONS, AnimationName, WowOptions.

Data attributes

| Attribute | Example | Effect | |-----------|---------|--------| | data-wow-delay | "0.5s" / "200ms" | Sets animation-delay | | data-wow-duration | "1.5s" / "800ms" | Sets animation-duration |

License

MIT