Framesync

A tiny frame scheduler for performantly batching reads, updates and renders.

Segregating actions that read and write to the DOM will avoid layout thrashing.

It's also a way of ensuring order of execution across a frame. For instance, Framer Motion batches animations on the update step, and renders on the render step, allowing independent animation of transform properties.

Install

``bash
npm install framesync
`

Usage

Framesync splits a frame into discrete read, update, preRender, render and postRender steps.

$3

Functions can be scheduled to different parts of the render loop with sync.

`javascript
import sync from 'framesync';
`

It provides four functions, one for scheduling a function to run on each part of the frame:

`javascript
sync.update(() => {});
`

$3

Each function is provided data about the current frame:

`javascript
sync.update(({ delta, timestamp }) => {});
`

- delta: Time since last frame (in milliseconds)
- timestamp: Timestamp of the current frame.

This object is recycled across frames, so values should be destructured if intended to be used asynchronously.

$3

We can run a function as an ongoing process by passing true as the second parameter:

`javascript
let count = 0;

sync.update(() => count++, true);
`

This will keep the process running until it's actively cancelled.

$3

The third parameter, immediate, can be used to sync a function on the current frame step.

By default, Framesync will schedule functions to run the next time that frame step is fired:

`javascript
sync.update(({ timestamp }) => {
// The following function will run on the subsequent frame:
sync.update((frame) => frame.timestamp !== timestamp);
});
`

By setting immediate to true, we can add this at the end of the current step:

`javascript
sync.update(({ timestamp }) => {
// The following function will run on the current frame:
sync.update(
(frame) => frame.timestamp === timestamp,
false,
true
);
});
`

$3

Synced processes can be cancelled with the cancelSync function:

`javascript
import sync, { cancelSync } from 'framesync';

let count = 0;

const process = sync.render(() => {
count++;
if (count >= 10) cancelSync.render(process);
}, true);
``