framesync

What is framesync?

The framesync npm package is a utility for managing timing and synchronization of animations, tasks, and other frame-based operations in JavaScript. It provides a simple API to schedule tasks to run before the next repaint, ensuring smooth visual updates.

What are framesync's main functionalities?

Scheduling tasks on the next frame

This feature allows you to schedule a function to be called at the start of the next frame. This is useful for ensuring updates are synchronized with the browser's repaint, reducing jank and improving performance of animations or UI updates.

import { onFrameStart } from 'framesync';

function update() {
  console.log('Updating on the next frame');
}

onFrameStart(update);

Canceling scheduled tasks

This feature provides the ability to cancel a previously scheduled task. This is useful for avoiding unnecessary updates, especially in scenarios where component states or data might change before the scheduled execution.

import { onFrameStart, cancelSync } from 'framesync';

const update = () => console.log('This will not run if canceled before the next frame');
const process = onFrameStart(update);
cancelSync.update(process);

Other packages similar to framesync

raf-schd

raf-schd provides a similar functionality to framesync by scheduling tasks with requestAnimationFrame. It differs in its API design and focus on throttling, making it more suitable for rate-limiting updates in high-frequency scenarios.

README

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

npm install framesync

Usage

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

Scheduling functions

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

import sync from 'framesync';

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

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

Frame data

Each function is provided data about the current frame:

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.

Keep alive

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

let count = 0;

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

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

Run immediately

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:

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:

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

Cancelling

Synced processes can be cancelled with the cancelSync function:

import sync, { cancelSync } from 'framesync';

let count = 0;

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