useAnimate

v0.0.15testeddemo

Reactive [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) wrapper for a single element. Exposes imperative controls (`play`, `pause`, `reverse`, `finish`, `cancel`) alongside reactive state (`playState`, `currentTime`, `playbackRate`, ...). The reactive state is synced via `requestAnimationFrame` only while the animation is running, so an idle animation costs nothing. SSR-safe: nothing touches the DOM until the element resolves.

Source Tests

Examples

const el = useTemplateRef<HTMLElement>('el');
const { playState, play, pause } = useAnimate(
  el,
  [{ transform: 'rotate(0)' }, { transform: 'rotate(360deg)' }],
  { duration: 1000, iterations: Infinity },
);

// Shorthand: third argument is the duration in milliseconds
useAnimate(el, { opacity: [0, 1] }, 500);

Demo

Loading demo…

Signature

export function useAnimate(
  target: MaybeComputedElementRef,
  keyframes: UseAnimateKeyframes,
  options?: number | UseAnimateOptions,
): UseAnimateReturn{ ... }

Parameters

Parameter	Type	Default	Description
`target`	`MaybeComputedElementRef`	—	Element to animate (reactive ref, getter, or element)
`keyframes`	`UseAnimateKeyframes`	—	Keyframes to animate, reactive
`options`?	`number \| UseAnimateOptions \| undefined`	—	Duration in ms, or full options object

Returns

UseAnimateReturnSupport flag, the `Animation` instance, controls, and reactive state