Getting Started
Introduction
SSR Safe animations with animejs
Introduction
nanime is a Nuxt module that brings AnimeJS into Vue and Nuxt applications as SSR-safe, reactive composables.
Why?
AnimeJS needs the DOM, so using it in Nuxt means onMounted guards,
cleanup on unmount, and care around SSR to avoid hydration mismatches.
That is the same handful of lines in every component that animates
anything. nanime moves it into the composables.
Features
- SSR safe: composables are guarded against server execution, so no
onMountedwrappers or client-only checks. - Reactive: parameters accept
ref,computedand getter functions, and the animation rebuilds when the values they read change. - Auto-imported: registered by the module, so no imports or plugin setup.
Composables
| Composable | Wraps | Description |
|---|---|---|
useAnimate | animate() | CSS properties, transforms, SVG and plain JS objects |
useWaapiAnimate | waapi.animate() | Web Animations API, off the main thread |
useAnimatable | createAnimatable() | Property setters with built-in tweening, for fast updates |
useAnimeTimeline | createTimeline() | Sequencing several animations on one clock |
useSplitText | splitText() | Splitting text into lines, words and characters |
useScrambleText | scrambleText() | Scramble and reveal effects with reactive text cycling |
useDraggable | createDraggable() | Drag interactions with snap, bounds and axis constraints |
Next steps
- Installation to add the module.
- Composables for each API, with a live demo on every page.
- Examples for full sequences built from several composables.
- Performance for which one to reach for, and what makes one do more work than it needs to.