useAnimationFrame
Run a callback on every animation frame with the time since the previous frame. Use it for canvas drawing, games and imperative animations where movement should be scaled by elapsed time.
- Level
- Intermediate
- Since
- v2.1.0
import {useAnimationFrame} from '@zenuilabs/react-hooks';Loading demo_
More in Time & Motion
Time & MotionIntermediateuseCountdownCount down to a date or through a duration and expose days, hours, minutes and seconds. Time left is computed from the clock rather than by counting ticks, so it does not drift in background tabs. When the target is a Date, the first render depends on the current time, so render it on the client only to avoid a hydration mismatch.Time & MotionBasicuseIntervalRun a callback on a fixed interval that pauses when the delay is null. The latest callback is always called, so it can read fresh state without restarting the timer.Time & MotionAdvanceduseSpringValueAnimate a number toward a target with spring physics. Use it for positions, sizes and counters that should settle naturally and stay smooth when the target changes mid-animation. It jumps straight to the target when the user prefers reduced motion.