raf

library0.1.0jsnpmunverified

The `raf` package provides a `requestAnimationFrame` polyfill, making the browser animation API available in non-browser environments like Node.js and ensuring broader compatibility across older browser versions. The current stable version is 3.4.1. It maintains a simple, direct API for scheduling animation callbacks, distinct from event emitter or stream-based approaches which were moved to the separate `raf-stream` package in versions prior to 1.0.0. Its primary differentiator is its lightweight nature and dedicated support for Node.js environments without relying on heavy browser emulation. Release cadence is infrequent, typical for a stable polyfill, with updates primarily addressing compatibility issues or minor bug fixes, rather than introducing new features. This package is a foundational utility for cross-environment animation loops.

http-networking web-framework

npm install raf

github ↗package ↗

INSTALL

IMPORT

SIG · RAF

raf

http-networkingjavascriptv0.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

raf

✓ import raf from 'raf';

✗ import { raf } from 'raf';

The primary `raf` function is a default export, common in modern ESM usage.

raf (CommonJS)

✓ const raf = require('raf');

✗ import raf from 'raf';

CommonJS `require` is the standard for Node.js and older bundler configurations documented by the library.

raf.polyfill

✓ import 'raf/polyfill';

✗ import { polyfill } from 'raf';

To apply the polyfill to the global scope (`window` or `global`), import 'raf/polyfill' directly as a side effect or call `raf.polyfill()`.

raf (global)

✓ window.raf(...);

When included via a `<script>` tag or after `raf.polyfill()` is executed in a browser-like environment, the `raf` function is available on the global `window` object.

Demonstrates a basic animation loop using `raf` to schedule a function (`animate`) to run on subsequent animation frames, logging progress until a predefined frame limit is reached.

import raf from 'raf'; let frameCount = 0; const maxFrames = 100; console.log('Starting animation loop...'); function animate() { // Perform animation logic here console.log(`Processing animation frame: ${frameCount}`); frameCount++; if (frameCount < maxFrames) { raf(animate); // Schedule the next frame } else { console.log('Animation finished after', maxFrames, 'frames.'); } } // Start the initial animation frame raf(animate);

Debug

Known issues

breakingThe stream and event emitter logic that was part of `raf` in versions prior to 1.0.0 has been removed. This functionality was extracted and moved to a separate package, `raf-stream`.

fix

If your application relied on the stream or event emitter API of `raf`, you must migrate to using the `raf-stream` package instead, or reimplement the streaming logic using the core `raf` function directly.

affects: >=1.0.0

gotchaThere's a distinction between importing the `raf` function directly (e.g., `import raf from 'raf'`) and applying the polyfill to the global scope (e.g., `import 'raf/polyfill'`). The former provides a local utility, while the latter modifies `window.requestAnimationFrame` (or `global.requestAnimationFrame` in Node).

fix

Determine whether you need to polyfill the global environment or simply use the `raf` function as a local import. Use `import 'raf/polyfill';` for global polyfilling or `raf.polyfill()` for explicit control over the target object.

affects: >=1.0.0

gotchaThe `raf` package provides different consumption patterns for various environments: CommonJS (Node, bundlers), AMD (RequireJS), and direct `<script>` inclusion. Mis-matching the import/require method with your environment can lead to errors.

fix

Ensure you are using the correct method for your build system or runtime environment. Use `require('raf')` or `import raf from 'raf'` for modules, and rely on `window.raf` after including the UMD bundle via a script tag.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: raf is not a function

This error typically occurs when `require('raf/polyfill')` or `import 'raf/polyfill';` is used to polyfill the global scope, and then the developer attempts to call `raf()` as if it were a locally imported function, rather than accessing `window.requestAnimationFrame` or `global.requestAnimationFrame`.

fix

If you are only polyfilling the global scope, access the function via `window.requestAnimationFrame` (or `global.requestAnimationFrame` in Node). If you intend to use `raf` as a local function, ensure you explicitly `import raf from 'raf';` or `const raf = require('raf');`.

ReferenceError: window is not defined

Attempting to access `window.requestAnimationFrame` or `window.raf` directly in a Node.js environment where the `window` object does not exist, before `raf/polyfill` has been correctly applied to polyfill the `global` object.

fix

In Node.js, ensure `require('raf/polyfill');` or `import 'raf/polyfill';` is executed early in your application's lifecycle to polyfill `global.requestAnimationFrame`. Alternatively, use the `raf` function returned by `require('raf')` directly without relying on global `window`.

Upgrade

Version history

0.1.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/chrisdickinson/raf ↗

packagehttps://www.npmjs.com/package/raf ↗