Lightweight Performant JavaScript Animation Library – Animol

Preview:

Description:

Animol is a small, performant and easy-to-use JavaScript animation library used to animate any value or attribute of a DOM element using CSS and requestAnimationFrame API.

Basic usage:

Install and import the Animol library.

npm install animol --save

import * as animol from 'animol';

Or directly load the Animol library from dist directory.

<script src="dist/animol.min.js"></script>

Animate an element by switching between two CSS objects.

const myElement = document.getElementById('myElement');
animol.css(
  // DOM element
  myElement, 
  // duration in ms
  2000,
  // from
  { // CSS rules here }
  // to
  { // CSS rules here' },
  // with or without easing functions
  animol.Easing.easeInQuad,
  // delay in mis
  1000
  
);

All available easing functions.

• linear
• easeInQuad
• easeOutQuad
• easeInOutQuad
• easeInCubic
• easeOutCubic
• easeInOutCubic
• easeInQuart
• easeOutQuart
• easeInOutQuart
• easeInQuint
• easeOutQuint
• easeInOutQuint
• easeInElastic
• easeOutElastic
• easeInOutElastic
• easeInBack
• easeOutBack
• easeInOutBack
• easeInBounce
• easeOutBounce
• easeInOutBounce

Animate attributes of a DOM element.

animol.ease(
  (progress) => {
    myElement.setAttribute('stroke-dashoffset', `${1000 - (progress * 1000)}`)
  },
  2000
);

Changelog:

v1.0.12 (06/14/2021)

• package update

v1.0.10 (06/13/2021)

• Fix window undefined error
• Add early return on SSR