Raf
Manages an animation frame loop with configurable FPS and playback controls.
Example
Explore a live example in CodeSandbox:
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
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
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
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();