Skip to content

👾 Create and manage animation functions with AnimationFrame API.

License

Notifications You must be signed in to change notification settings

VitorLuizC/animate

Repository files navigation

@bitty/animate

License Library minified size Library minified + gzipped size

Animate bubbles example GIF

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.