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 provided by AnimeJS via #nanime/utils.
import { snap, lerp, mapRange } from '#nanime/utils'
snap(30)
lerp(0, 100)
mapRange(0, 100, 0, 200)
Stagger
stagger() allows you to create staggering effects for your animations.
Sample usage
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)',
loop: true,
alternate: true,
})
<template>
<div class="flex gap-2.5">
<div v-for="i in 9" :key="i" ref="items" class="simple-box opacity-0 w-8" />
</div>
</template>
Snap
Rounds a Number to the nearest specified increment or creates a snapping
Functionwith a pre-defined increment parameter.
import { snap } from '#nanime/utils'
import type { AnimationParams } from '#nanime/types'
const defaults: AnimationParams = {
x: { to: 300 },
duration: 3000,
loop: true,
alternate: true,
ease: 'outBack',
}
useAnimate('.normal', defaults)
useAnimate('.snapped', {
...defaults,
modifier: snap(30),
})
<template>
<div class="flex gap-4 flex-col">
<div class="simple-box normal w-8" />
<div class="simple-box snapped w-8" />
</div>
</template>
See AnimeJS Utilities documentation for more.