Composables
useWaapiAnimate
Documentation for useWaapiAnimate composable.
Instant playView on GitHub
The useWaapiAnimate composable wraps the waapi.animate function
from AnimeJS to help create WAAPI powered animations.
Arguments
target
WaapiTargets required
The DOM element(s) to animate.
parameters
MaybeRefOrGetter<WAAPIAnimationParams>
Object containing keyframes and animation options.
Example
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 WAAPIAnimation instance.
API
Types
function useWaapiAnimate(
target: WaapiTargets,
parameters?: MaybeRefOrGetter<WAAPIAnimationParams>
): WAAPIAnimation
type WaapiElementTargets = VueInstance | HTMLElement | HTMLElement[] | SVGElement | SVGElement[] | NodeList | string | null
type WaapiTargets = MaybeRef<WaapiElementTargets> | MaybeRef<WaapiElementTargets>[]
See AnimeJS WAAPI documentation for more details.
Notes
useWaapiAnimatedoes not support JS Objects as targets.Do not destructure the return value to maintain reactivity.
const animation = useWaapiAnimate('.target', options)
animation.play()