Socket
Socket
Sign inDemoInstall

framesync

Package Overview
Dependencies
1
Maintainers
1
Versions
41
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

framesync

A frame-synced render loop for JavaScript


Version published
Maintainers
1
Weekly downloads
1,959,003
decreased by-8.21%

Weekly downloads

Readme

Source

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);

Keywords

FAQs

Last updated on 15 Aug 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc