useAnimation

About

useAnimation produces an eased progress value for a duration, optional delay, and optional loop. It is deprecated and will be removed in a future major release. Use useEasing for start, stop, reset, and direction controls.

Examples

import { useAnimation } from "rooks";

export default function LegacyProgress() {
  const progress = useAnimation({ duration: 1000, delay: 100 });
  return (
    <progress max={1} value={progress}>
      Progress: {progress}
    </progress>
  );
}

Parameters

options is required and has this inline shape:

Property	Type	Default	Meaning
`duration`	`number`	required	Duration in milliseconds; use a positive value.
`easing`	`(progress: number) => number`	identity	Maps raw progress from `0` through `1`.
`delay`	`number`	`0`	Delay before the first pass.
`loop`	`boolean`	`false`	Restarts at completion; later passes have no delay.

The options type is not a public type export.

Return value

A number containing the easing function's output. The hook clamps raw progress, but it does not clamp a custom easing function's return value.

Behavior and lifecycle

The first animation frame establishes the clock. Changing duration, easing identity, delay, or loop resets that clock, but does not synchronously reset the rendered value. Looping resets the clock after each completed pass. The underlying frame loop stays scheduled while the component is mounted, even after a non-looping animation reaches its final value, and is cancelled on unmount.

In development, the hook emits one process-wide deprecation warning.

Compatibility and accessibility

Server output starts at 0; animation begins after client effects run. Respect usePrefersReducedMotion in new code and do not rely on motion alone to communicate state. Native <progress> or visible text gives users a non-motion equivalent.