Framesync is a JavaScript library designed for scheduling functions into a synchronized render loop, primarily to prevent layout thrashing and ensure predictable execution order within a browser frame. It provides discrete steps for `read`, `update`, `preRender`, `render`, and `postRender` operations, allowing developers to organize DOM interactions efficiently. The current stable version is 6.1.2, and as part of the Popmotion ecosystem, it maintains a steady, mature release cadence focusing on stability and performance. Its primary differentiator is the explicit segregation of frame steps, which is crucial for high-performance animations and UI updates, notably used by libraries like Framer Motion to manage complex transform animations independently. Functions scheduled with Framesync receive frame data including `delta` (time since last frame) and `timestamp`.
npm install framesyncVerified import paths — ran on the pinned version, not inferred.
Demonstrates scheduling a function to run on the `update` step of the render loop, accessing frame data, and canceling the process once a condition is met. It also shows an immediate render call.
Destructure the `FrameData` object immediately: `sync.update(({ delta, timestamp }) => { const currentDelta = delta; // use currentDelta asynchronously })`Use `sync.step(callback, keepAlive, true)` to run on the current frame step. For example: `sync.update(() => console.log('now!'), false, true);`Always ensure there's a clear condition to call `cancelSync.step(yourProcessFunction)` when using `keepAlive: true`.
Ensure you are using `import sync from 'framesync';` for the default export. If using CommonJS, try `const sync = require('framesync').default;` (though this is not recommended for pure ESM libraries).Ensure `cancelSync` is imported as a named export: `import { cancelSync } from 'framesync';`No dependency data recorded yet.