Animate Nuxt with AnimeJS

Create SSR Safe animations for Nuxt without having to worry about targets and component lifecycle.

<div class="grid grid-cols-10 place-items-center gap-0.5 absolute inset-0 p-5">
  <div v-for="i in 40" :key="i" ref="boxes" class="size-9 rounded-sm bg-primary/30 aspect-square" />
</div>

import { stagger } from '#nanime/utils'

const boxes = useTemplateRef('boxes')

useAnimate(boxes, {
  scale: [{ to: [0, 1.25] }, { to: 0 }],
  boxShadow: [
    { to: '0 0 1rem 0 currentColor' },
    { to: '0 0 0rem 0 currentColor' }
  ],
  delay: stagger(100, {
    grid: [10, 4],
    from: 'center',
  }),
  duration: 1500,
  playbackEase: 'outQuad',
  loop: true,
})

Shipped with many features

Built with Nuxt 4

Created with nuxt for nuxt

Animation engine by animejs

SSR safe

Composables don't break SSR or cause hydration issues

Customizable

Enable or disable composables

Composables

Wrappers around every AnimeJS utility, built for Vue reactivity.

useAnimate

CSS properties, transforms, SVG and plain JS objects.

useWaapiAnimate

Web Animations API, running off the main thread.

useAnimatable

Property setters with built-in tweening, for fast updates.

useSplitText

Split text into lines, words, and characters for staggered animations.

useScrambleText New

Text scramble and reveal effects with reactive text cycling.

useDraggable

Drag interactions with snap, bounds, and axis constraints.

useAnimeTimeline

Sequence and sync multiple timelines into one master composition, with full playback controls.

The rest of the toolkit

Easing curves, re-exported Anime.js utilities and SVG/text proxies. The pieces that show up inside the composables above rather than standing on their own.

Easings

Spring physics and custom cubicBezier curves, used throughout the showcase examples above.

Utils

Stagger, targets, and other helpers re-exported directly from animejs/utils.

Proxies

SVG morphing, motion paths, drawable strokes, and the text-scramble proxy.