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

HTML

<div class="fullpage-center">
  <div class="wrapper">
    <div class="info">
      <p id="target"></p>
      <p id="fps"></p>
      <p id="factor"></p>
      <p id="time"></p>
      <p id="index"></p>
    </div>

    <div class="buttons">
      <button type="button" class="btn" id="play">Play</button>

      <button type="button" class="btn" id="pause">Pause</button>
    </div>
  </div>
</div>

CSS

.wrapper {
  width: 16rem;
  max-width: 100%;
  padding: 1rem;
}

.info {
  width: 100%;
  font-size: 0.75rem;

  p {
    margin: 0.25rem 0;
  }
}

.buttons {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  width: 100%;
}

.btn {
  width: 100%;
}

JavaScript

import {
  Raf
} from "vevet";

const target = document.getElementById("target");
const fps = document.getElementById("fps");
const factor = document.getElementById("factor");
const time = document.getElementById("time");
const index = document.getElementById("index");

const raf = new Raf({
  enabled: true,
  onFrame: () => {
    target.innerHTML = `Target FPS: ${raf.props.fps}`;
    fps.innerHTML = `Current FPS: ${raf.fps}`;
    factor.innerHTML = `FPS Factor: ${raf.fpsFactor.toFixed(2)}`;
    time.innerHTML = `Time: ${raf.timestamp.toFixed(2)}`;
    index.innerHTML = `Frame Index: ${raf.index}`;
  }
});

document.getElementById("play").addEventListener("click", () => raf.play());

document.getElementById("pause").addEventListener("click", () => raf.pause());

Open live 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();