@bitty/animate

Create and manage animation functions with AnimationFrame API.

• :zap: Dependency free and smaller than 170B (ESM minified + gzipped);
• :label: Type definitions to TS developers and IDE/Editors intellisense;
• :package: 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.