Rooks
Animation & Timing

useTween

A hook that returns a tweened value from 0 to 1 over a specified duration.

useTween

useTween is a hook that returns a tweened value from 0 to 1 over a specified duration. It uses requestAnimationFrame for smooth animations.

Usage

import { useTween, Easing } from "rooks";
 
function App() {
  const value = useTween(1000, Easing.easeInOutQuad);
 
  return (
    <div style={{ opacity: value }}>
      Fading In...
    </div>
  );
}

Arguments

ArgumentTypeDefaultDescription
durationnumber200Duration of the tween in milliseconds.
easing(t: number) => numberEasing.linearEasing function to use.

Return Value

Returns a number between 0 and 1.

Next

useTimeoutWhen

Next

useBroadcastChannel

On this page