RAF-ticker

A simple ticker with requestAnimationFrame.

Demo

Demo page

Open the console from your browser's developer tools.

Getting Started

Install

npm i @masatomakino/raf-ticker -D

How to use

import { RAFTicker } from "@masatomakino/raf-ticker";

Just import and RAFTicker starts.

RAFTicker.on("tick", (e) => {
  console.log(e);
});

RAFTicker dispatches events every frame.

API document

Why is this package necessary?

Unification of requestAnimationFrame improves rendering performance.

https://stackoverflow.com/questions/17103785/multiple-requestanimationframe-performance

If you use multiple animation modules together, setting up a render loop in each module will increase the cost of callbacks.

Warning Performance improvement from unifying requestAnimationFrame depends on the browser implementation. In future versions of the browser, this approach may result in performance degradation. Be sure to check performance in your actual environment.

License

MIT licensed.