Effortless animations with AnimeJS
Create SSR Safe animations for Nuxt without having to worry about targets and component lifecycle.
<div class="boxes grid grid-cols-10 place-items-center gap-0.5 absolute inset-0 p-5">
<div v-for="i in 40" :key="i" class="box size-9 rounded-sm bg-white/40 aspect-square" />
</div>
import { stagger } from '#nanime/utils'
useAnimate('.boxes > .box', {
scale: [{ to: [0, 1.25] }, { to: 0 }],
boxShadow: [
{ to: '0 0 1rem 0 currentColor' },
{ to: '0 0 0rem 0 currentColor' }
],
delay: stagger(100, {
grid: [10, 4],
from: 'center',
}),
})