React hook for easy access requestAnimationFrame browser API.
Written with Typescript and provides you with handy animation duration control.


  • Basic usage requres only one handler:

    const nextAnimationFrameHandler = (progress: number) => {...};

    With this nextAnimationFrameHandler will be called every frame and progress variable will always have value 1, so you wont need it in your nextAnimationFrameHandler

  • Usage with duration:

    const myAnimatedDiv = React.useRef();
    const nextAnimationFrameHandler = (progress: number) => {
 = progress * 100 + 'px'
    useRequestAnimationFrame(nextAnimationFrameHandler, { duration: 2000 })

    In this casenextAnimationFrameHandler will be called every frame with progress calculated based on time when first animation frame was shown

  • Usage with shouldAnimate:

    const [shouldAnimate, setShouldAnimate] = React.useState(false);
    const nextAnimationFrameHandler = (progress: number) => {...};
    useRequestAnimationFrame(nextAnimationFrameHandler, { duration: 2000, shouldAnimate });

    In this casenextAnimationFrameHandler will not be called initially and animation will start only after setShouldAnimate(true) call

⭐ Happy Hacking ⭐

You can find more implementation details in my article


View Github