Skip to main content

Raf

  • Manages a requestAnimationFrame loop
  • Supports custom FPS throttling (including dynamic 'auto' mode)
  • Provides playback control (play, pause)
  • Measures real-time FPS and frame duration
  • Includes tools for frame-rate–independent animations (damping)

Basic Demo​

More demos​

To explore more demos, click here.

Initialization​

Raf is easy to initialize:

import { Raf } from "vevet";

const raf = new Raf({ enabled: true });

raf.on('frame', () => {
  console.log('your logic');
});

Disabled by default:

import { Raf } from "vevet";

const raf = new Raf({
  enabled: false
});

Predefined FPS or adaptive FPS:

import { Raf } from "vevet";

const raf = new Raf({
  enabled: true,
  fps: "auto" // or fps: [number]
});

Get real-time FPS:

import { Raf } from "vevet";

const raf = new Raf({
  enabled: true,
  fps: 30
}, {
  onFrame: ({ fps }) => {
    console.log(fps);
  }
});

Damping (used for consistent animations across 60Hz, 120Hz, and others, see demo):

const ease = raf.lerpFactor(0.1);

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

Play:

raf.play();

Pause:

raf.pause();

Destroy the Raf instance:

raf.destroy();