Lightweight Performant JavaScript Animation Library – Animol

Category: Animation , Javascript | March 8, 2019
Author: stufreen
Views Total: 224
Official Page: Go to website
Last Update: March 8, 2019
License: MIT

Preview:

Lightweight Performant JavaScript Animation Library – Animol

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

You Might Be Interested In:


Leave a Reply