npm install @solid-primitives/raf
yarn add @solid-primitives/raf
pnpm add @solid-primitives/raf


Reactive primitives providing support to window.requestAnimationFrame.


A primitive creating reactive window.requestAnimationFrame, that is automatically disposed onCleanup.

It takes a callback argument that will run on every frame.

Returns a signal if currently running as well as start and stop methods

import createRAF from "@solid-primitives/raf";

const [running, start, stop] = createRAF(timeStamp => console.log("Time stamp is", timeStamp));

running(); // => false
running(); // => true


function createRAF(
  callback: FrameRequestCallback,
): [running: Accessor<boolean>, start: VoidFunction, stop: VoidFunction];


To respect clients refresh rate, timeStamp should be used to calculate how much the animation should progress in a given frame, otherwise the animation will run faster on high refresh rate screens. As an example: A screen refreshing at 300fps will run the animations 5x faster than a screen with 60fps if you use other forms of time keeping that don't consider this. Please see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame


A primitive for wrapping window.requestAnimationFrame callback function to limit the execution of the callback to specified number of FPS.

Keep in mind that limiting FPS is achieved by not executing a callback if the frames are above defined limit. This can lead to not consistant frame duration.

The targetFPS primitive takes two arguments:

  • callback - The callback to run each allowed frame
  • fps - The target FPS limit
import createRAF, { targetFPS } from "@solid-primitives/raf";

const [running, start, stop] = createRAF(
  targetFPS(timeStamp => console.log("Time stamp is", timeStamp), 60)

// the target fps value can be a reactive sigmal
const [fps, setFps] = createSignal(60);
createRAF(targetFPS((timestamp) => {...}, fps));


function targetFPS(
  callback: FrameRequestCallback,
  fps: MaybeAccessor<number>,
): FrameRequestCallback;


Live Site

You may view a working example here: CodeSandbox