RAFManager

Overview

RAFManager is a lightweight and efficient animation manager built on top of the requestAnimationFrame API. It provides precise global control over the addition and removal of animations.

Key Features

• Minimalistic: Implemented in just a few dozen lines of code
• Easy Integration: Use as a foundation for animation projects or integrate where needed
• Global Control: Effortlessly manage animations across your entire application

Installation

Browser

Include the script directly in your HTML file:

<script src="js/RAFManager.min.js"></script>

npm

Install using npm:

npm install raf-manager --save

Then import it in your project:

import RAFManager from 'raf-manager';

API

Add an Animation Function - Auto Start

RAFManager.add(func, fps, param);

Remove an Animation Function - Auto Stop

RAFManager.remove(func);

Force Start and Stop

RAFManager.start();
RAFManager.stop();

Usage Demo

RAFManager.add((title) => {
    top++;
    const node = this.inputRef.current;
    node.innerHTML = title;
    node.style.top = top + 'px';
}, 25, 'hello world!');

RAFManager.add(func1, 2);
RAFManager.add(func2, 3.5);
RAFManager.add(func3, 10.5);

Build

Node.js is a dependency. Use the terminal to install it with npm:

npm install
npm run build

ES6 Lint

npm run lint

License

RAFManager is released under the MIT License. http://www.opensource.org/licenses/mit-license