nextFrame

nextFrame(): Promise<void>

Resolves on the next animation frame.

Usage

import { nextFrame } from '@studiometa/js-toolkit';

async function afterOneFrame(el: HTMLElement) {
  el.classList.add('is-entering');
  await nextFrame();
  el.classList.add('is-active');
}

What it is for

Letting the browser see a style before the next one is applied — the two-step every CSS transition needs. transition(), enterTransition() and leaveTransition() are built on exactly this.

What it is not

It does not mean "after paint". rAF callbacks run before style, layout and paint, so no phase inside a frame can read post-layout geometry. afterWrite is removed for that reason.

To measure after a layout has happened, measure in the read phase of the next frame — defaultScheduler.read() or $read() — or use a ResizeObserver.

For a test that needs several frames, frames(count?) is the same idea with a count.