Composables
Utilities
AnimeJS helpers re-exported by nanime: easings, utilities, and text and SVG proxies.
nanime re-exports the AnimeJS helpers that go inside composable
parameters, so a Nuxt app never imports from animejs directly. AnimeJS
documents each one.
| Import path | Exports | AnimeJS docs |
|---|---|---|
#nanime/easings | eases, cubicBezier, steps, spring, … | Easings |
#nanime/utils | stagger, snap, random, shuffle, animate, … | Utilities |
#nanime/proxies/text | scrambleText | Text |
#nanime/proxies/svg | morphTo, createMotionPath, createDrawable | SVG |
#nanime/proxies | Everything in /text and /svg |
import { stagger } from '#nanime/utils'
import { morphTo } from '#nanime/proxies/svg'
useAnimate(dots, { y: [16, 0], delay: stagger(80) })
useAnimate(path, { d: morphTo('#target-path') })
Proxies
A proxy is a value for an animated property, not a function that animates
anything by itself. Pass it as the value of a property in useAnimate or
a timeline step:
import { scrambleText } from '#nanime/proxies/text'
const tl = useAnimeTimeline()
tl.add(title, { innerHTML: scrambleText({ text: 'nanime' }) })
.add(title, { innerHTML: scrambleText({ text: 'nuxt' }) })
Use scrambleText when the scramble is one step in a sequence.
To scramble an element whenever a text ref changes, use
useScrambleText.