@bitty/animate
Create and manage animation functions with AnimationFrame API.
-
⚡ Dependency free and smaller than 170B (ESM minified + gzipped); -
🏷️ Type definitions to TS developers and IDE/Editors intellisense; -
📦 CommonJS, ESM and UMD distributions (CDN uses UMD as default);
Codepen
See bubbles example atInstallation
This library is published in the NPM registry and can be installed using any compatible package manager.
npm install @vitorluizc/animate --save
# For Yarn, use the command below.
yarn add @vitorluizc/animate
Installation from CDN
This module has an UMD bundle available through JSDelivr and Unpkg CDNs.
<script src="https://cdn.jsdelivr.net/npm/@bitty/animate"></script>
<script>
// module will be available through `animate` function.
var animation = animate(function () {
// ...
});
animation.start();
</script>
Usage
Call animate
, the default exported function, with your callback and use returned object to manage your animation.
import animate from '@bitty/animate';
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
const position = { x: 0, y: 0 };
const animation = animate(() => {
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.arc(position.x, position.y, 100 / 2, 0, 2 * Math.PI);
context.fillStyle = '#000000';
context.fill();
context.closePath();
});
window.addEventListener('mousemove', (event) => {
position.x = event.clientX;
position.y = event.clientY;
});
animation.start();
See this example on Codepen.
API
-
animate
The default exported function, which receives
callback
as argument and returns anAnimation
.-
callback
is a synchronous function running into a AnimationFrame recursion.
let count = 0; const animation = animate(() => { context.clearRect(0, 0, element.width, element.height); context.font = '4rem monospace'; context.textAlign = 'center'; context.fillText(count, element.width / 2, element.height / 2); count++; }); animation.start();
See this example on Codepen.
TypeScript type definitions.
export default function animate(callback: () => void): Animation;
-
-
Animation
An object returned by
animate
function to manage your animations. It can start, stop and check if animation is running.-
running
: A getter property that indicates if animation is running. -
start()
: A method to start the animation. -
stop()
: A method to stop the animation.
const animation = animate(() => { ... }); animation.start(); // Stops the animation after 10s setTimeout(() => animation.stop(), 10 * 1000); if (animation.running) console.log('The animation is running...');
TypeScript type definitions.
export interface Animation { readonly running: boolean; stop: () => void; start: () => void; }
-
License
Released under MIT License.