Misc
Utils
Guide on how to utilize exposed animejs utils
A collection of utility functions for common animation tasks that can also serve as modifier functions.
You can access all utils exposed from animejs, e.g stagger, lerp, random, ..etc.
Stagger
stagger() allows you to create staggering effects for your animations.
import { stagger } from '#nanime/utils'
const items = useTemplateRef("items");
useAnimate(items, {
opacity: [0, 1],
scale: [0.5, 1],
delay: stagger(100, { grid: [9, 1], from: 'center' }),
duration: 800,
ease: 'outElastic(1, .5)',
})
<div class="flex gap-x-2.5">
<div
v-for="i in 8"
:key="i"
ref="items"
class="size-8 rounded-md opacity-0"
/>
</div>
See AnimeJS Utilities documentation for more.