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 high-performance frame-synced render loop for any JavaScript environment.

Designed to manage multiple

Features

• Tiny: < 1.5kb minified and gzipped.
• Compatible with all browsers, Node and React Native environments.
• Unity-inspired discrete process steps.
• willRender method can provide unnecessary render calls.
• Automatically wakes and sleeps based on active processes.
• Lazy processes that run only when other processes are running.

Quick start

Install

npm install framesync --save

Use

import { Process } from 'framesync';

let frame = 0;

const process = new Process({
    update: () => frame++,
    render: () => console.log(frame)
});

process.start();

Render loop order of execution

This is the order of execution for Process steps, once per frame:

framesync will fire the framestart method of all active processes, then all the update methods and so on.

Each step is optional, and each function (if defined) is called with the arguments process, frameStamp, frameDuration, in the context of the Process itself.

If willRender is defined and returns false, the render methods will be skipped for that frame.

API

Methods

currentTime

Process

Create

import { Process } from 'framesync';

const process = new Process(steps, isLazy);

Arguments

• steps [object]
  • Object of step functions, each individually optional.
• isLazy [boolean] (optional)
  • If true, this Process will only fire when non-lazy Processes are also active.

Methods

.start()

Start the process on the next available frame.

.stop()

Stop the process after the next available frame.

.once()

Fire the process once on the next available frame.