Raf

Manages an animation frame loop with configurable FPS and playback controls.

Example

Explore a live example in CodePen:

Props

Mutable Props

Mutable properties can be updated at runtime using .updateProps().

Name	Description	Type	Default Value
fps	Frames per second (FPS) for the animation. Set to 'auto' for dynamic adjustment.	'auto' | number	'auto'
enabled	Enables or disables the Raf animation loop.	boolean	false

Accessors

note

All Module's accessors are available in this class.

duration

Type: number

Duration of the last frame in ms

fps

Type: number

Real-time FPS

fpsFactor

Type: number

Scaling coefficient based on a 60 FPS target

index

Type: number

Current frame index

isPlaying

Type: boolean

Playback state of the animation frame

timestamp

Type: number

Timestamp of the current frame

Methods

note

All Module's methods are available in this class.

lerpFactor

Calculate linear interpolation factor to make animations run the same regardless of FPS

const ease = instance.lerpFactor(0.1);

// and use it in your lerp
lerp(from, to, ease);

pause

Pause the animation loop

instance.pause();

play

Start the animation loop

instance.play();

Callbacks

note

All Module's callbacks are available in this class.

play

Triggered when the animation starts

const destruct = instance.on('play', () => console.log('play'));

// Cancel the callback
destruct();

pause

Triggered when the animation is paused

const destruct = instance.on('pause', () => console.log('pause'));

// Cancel the callback
destruct();

toggle

Triggered when play/pause state toggles

const destruct = instance.on('toggle', () => console.log('toggle'));

// Cancel the callback
destruct();

frame

Triggered on every animation frame

const destruct = instance.on('frame', ({ fps, fpsFactor, duration }) => {
  console.log('current FPS', fps);
  console.log('scaling coefficient based on a 60 FPS target', fpsFactor);
  console.log('duration of the last frame in ms', duration);
});

// Cancel the callback
destruct();