Rooks
Animation & Timing

useAnimation

A hook that creates an animation with duration, easing, delay, and loop options.

useAnimation

useAnimation is a hook that creates an animation with duration, easing, delay, and loop options.

Usage

import { useAnimation } from "rooks";
 
function App() {
  const value = useAnimation({
      duration: 1000,
      loop: true
  });
 
  return (
    <div style={{ 
        width: 100, 
        height: 100, 
        background: 'red',
        transform: `rotate(${value * 360}deg)` 
    }} />
  );
}

Arguments

ArgumentTypeDefaultDescription
optionsAnimationOptions-Animation options.

AnimationOptions

PropertyTypeDefaultDescription
durationnumber-Duration of the animation in milliseconds.
easing(t: number) => numbert => tEasing function to use.
delaynumber0Delay before starting the animation in milliseconds.
loopbooleanfalseWhether to loop the animation.

Return Value

Returns the current value of the animation (0 to 1).

Next

useIntervalWhen

On this page