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

A tiny frame scheduler for performantly batching reads and renders.

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

Install

npm install framesync --save

Usage

The Framesync render loop executes four sequential steps, once per frame.

• frameStart
• frameUpdate
• frameRender
• frameEnd

Developers can set any function to run at any of these steps using the on and cancel callbacks:

• onFrameStart, cancelOnFrameStart
• onFrameUpdate, cancelOnFrameUpdate
• onFrameRender, cancelOnFrameRender
• onFrameEnd, cancelOnFrameEnd

Framesync also exports some time-measurement methods:

• currentTime: The current time as measured by the host platform's most accurate now function.
• currentFrameTime: The time the current requestAnimationFrame was initiated.
• timeSinceLastFrame: The duration between the previous frame and the current currentFrameTime

Example

import {
  timeSinceLastFrame,
  onFrameStart,
  cancelFrameStart
} from 'framesync';

function logTimeSinceLastFrame() {
  console.log(timeSinceLastFrame());
  onFrameStart(logTimeSinceLastFrame);
}

onFrameStart(logTimeSinceLastFrame);

function stopLogging() {
  cancelOnFrameStart(logTimeSinceLastFrame);
}

setTimeout(stopLogging, 5000);