Misc
Easings
Documentation for available easings.
You can access all easings provided by AnimeJS via #nanime/easings.
import { eases, cubicBezier } from '#nanime/easings'
eases.outBack(3)
cubicBezier(.7, .1, .5, .9)
Sample usage
import { spring } from '#nanime/easings'
const props = defineProps<{
ease?: string
}>()
const box = useTemplateRef('box')
useAnimate(box, {
x: [0, 300],
duration: 1500,
ease: props.ease || spring({ bounce: 0.4 }),
loop: true,
direction: 'alternate',
})
<template>
<div class="relative flex items-center">
<div ref="box" class="size-8 rounded-sm bg-primary shadow-sm" />
</div>
</template>
inOut(3)
outBack
See the AnimeJS Easings documentation for a complete list of available easing functions.