request-animation-frames

request-animation-frames

Use requestAnimationFrame as an async iterable, in any JavaScript environment

This package ponyfills requestAnimationFrame internally when not available, so it works in any JavaScript environment.

Install

npm install request-animation-frames

Usage

import requestAnimationFrames from 'request-animation-frames';

for await (const timestamp of requestAnimationFrames()) {
	console.log('Animation frame timestamp:', timestamp);
	drawVisualization();
}

API

requestAnimationFrames()

Returns an AsyncIterable that yields animation frame timestamps.

The first timestamp is yielded right away for easier setup.

FAQ

How do I stop the loop?

Simply return or break in the loop.

How do I stop the loop from the outside?

import requestAnimationFrames from 'request-animation-frames';

let shouldStop = false;

(async () => {
	for await (const timestamp of requestAnimationFrames()) {
		if (shouldStop) {
			break;
		}

		console.log('Animation frame timestamp:', timestamp);
	}
})();

setTimeout(() => {
	shouldStop = true;
}, 10000);

Related

• dom-mutations - Observe changes to the DOM using an async iterable