Composables
useAnimate
Documentation for useAnimate composable.
Instant playView on GitHub
The useAnimate composable wraps the animate function from AnimeJS.
Arguments
target
AnimeTargets required
The value to animate. Can be a CSS selector, DOM element, Vue component, JS object, or an array of these.
parameters
MaybeRefOrGetter<AnimationParams>
Example
{"x":0,"y":0}
import { round } from '#nanime/utils'
const vector2D = shallowReactive({ x: 0, y: 0 })
useAnimate(vector2D, {
x: 100,
y: 150,
duration: 10000,
modifier: round(0),
ease: 'outElastic',
alternate: true,
loop: true,
})
<template>
<p>{{ JSON.stringify(vector2D) }}</p>
</template>
Return Value
Returns a shallowReactive object wrapping the AnimeJS JSAnimation instance.
API
Types
function useAnimate(
target: AnimeTargets,
parameters?: MaybeRefOrGetter<AnimationParams>
): JSAnimation
type AnimeTargets = TargetsParam | MaybeElementRef | MaybeElementRef[]
See AnimeJS Animation documentation for more details.
Notes
Passing an object created with
ref will fail. You should pass a
shallowReactive or a reactive value as the target.Do not destructure the return value. The instance is wrapped in
shallowReactive to maintain reactivity.
Destructuring will break the connection to the underlying AnimeJS instance updates.// ❌ Avoid destructuring
const { play } = useAnimate('.target', { ... })
// ✅ Access methods directly
const animation = useAnimate('.target', { ... })
animation.play()