Composables
useWaapiAnimate
Documentation for useWaapiAnimate composable.
The useWaapiAnimate composable wraps the waapi.animate function
from AnimeJS to help create WAAPI powered animations.
Type Definition
function useWaapiAnimate(
target: WaapiTargets,
options: WAAPIAnimationParams
): WAAPIAnimation
Arguments
target
WaapiTargets required
The DOM element(s) to animate.
options
WAAPIAnimationParams
Object containing keyframes and animation options.
useWaapiAnimatedoes not support JS Objects as targets.Usage
import { stagger } from '#nanime/utils'
useWaapiAnimate('.square', {
y: {
to: [0, -15, 0],
ease: 'out(4)',
duration: 1000,
},
rotate: { from: -180, to: 0, ease: 'out(3)' },
scale: { to: [0.65, 1, 0.65], ease: 'inOut(3)' },
duration: 500,
delay: stagger(75),
loop: true,
})
<template>
<div class="flex gap-2.5">
<div v-for="i in 6" :key="i" class="simple-box square w-8" />
</div>
</template>
Return Value
Returns a shallowReactive object wrapping the animation instance.
Do not destructure the return value to maintain reactivity.
const animation = useWaapiAnimate('.target', options)
animation.play()
API
Types
type WaapiElementTargets = VueInstance | HTMLElement | HTMLElement[] | SVGElement | SVGElement[] | NodeList | string | null
type WaapiTargets = MaybeRef<WaapiElementTargets> | MaybeRef<WaapiElementTargets>[]
See AnimeJS WAAPI documentation for more details.