useAnimationFrame

Run the latest callback on browser animation frames.

useAnimationFrame owns a repeating requestAnimationFrame loop and always invokes the newest callback.

Signature

void useAnimationFrame(
  AnimationFrameCallback callback, {
  bool enabled = true,
});

useAnimationFrame((timestamp) => position.value++, enabled: running);

Interactive useAnimationFrame demo

Animation frames: 0

Disabling or unmounting cancels the scheduled frame. Timestamps are exposed as Duration values.

No frame is scheduled and the callback is never invoked on the server.

Do not rebuild expensive trees at display refresh rate without need. Use CSS animations for purely visual transitions.

Use useInterval for wall-clock repetition and usePostFrameEffect for a single completed frame.