useWaapiAnimate

The useWaapiAnimate composable wraps the waapi.animate function from AnimeJS to help create WAAPI powered animations.

Arguments

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.

Caveats

• Plain JS objects are not valid targets. The Web Animations API only animates elements, so use useAnimate for objects and numbers.
• Don't destructure the return value. The instance is wrapped in shallowReactive, and destructuring copies its values out once, disconnecting them from the instance.

// loses the connection to the instance
const { play } = useWaapiAnimate('.target', options)

// keeps it
const animation = useWaapiAnimate('.target', options)
animation.play()