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

See bubbles example at Codepen

Installation

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 an Animation.

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.

VitorLuizC/animate