Composables
useAnimatable
Documentation for useAnimatable composable.
Wrapper for the createAnimatable function from AnimeJS.
Efficiently animates target properties, making it an ideal replacement for
animate()andutils.set()in situations where values change frequently, such as cursor events or animation loops.
Type Definition
function useAnimatable(
target: AnimeTargets,
parameters: AnimatableParams
): AnimatableObject
Arguments
target
AnimeTargets required
The reactive object or array of objects to animate.
parameters
AnimatableParams
Usage
import { useIntervalFn } from '@vueuse/core'
import { round } from '#nanime/utils'
const counter = reactive({ x: 0 })
const animator = useAnimatable(counter, {
x: 100,
duration: 10000,
modifier: round(0),
ease: 'outElastic',
})
useIntervalFn(() => {
animator.x?.(counter.x + 1)
}, 1000)
<template>
<p>Counter: {{ JSON.stringify(counter) }}</p>
</template>
Counter: {"x":0}
Return Value
Returns a shallowReactive object wrapping the AnimeJS animatable 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 { revert } = useAnimatable(obj, { ... })
// ✅ Access methods directly
const animation = useAnimatable(obj, { ... })
animation.revert()
API
Types
type AnimeTargets = TargetsParam | MaybeElementRef | MaybeElementRef[]
See AnimeJS Animatable documentation for more details.