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 iteration?

Simply return or break in the loop body.

How do I stop the iteration 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