Composables
useAnimate
Documentation for useAnimate composable.
The useAnimate composable wraps the animate function from AnimeJS.
Type Definition
function useAnimate(
target: AnimeTargets,
parameters: AnimeParams
): AnimeInstance
Arguments
Passing an object created with
ref will fail. You should pass a
shallowReactive or a reactive value as the targettarget
AnimeTargets required
The value to animate. Can be a CSS selector, DOM element, Vue component, JS object, or an array of these.
parameters
AnimeParams
Sample usage
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>
{"x":0,"y":0}
Return Value
Returns a shallowReactive object wrapping the AnimeJS instance.
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()
API
Types
type AnimeTargets = TargetsParam | MaybeElementRef | MaybeElementRef[]
See AnimeJS documentation for full list of parameters and properties.