microanimate's Introduction

microAnimate

microAnimate is a tiny(~2.5kb) JavaScript Library with a CSS-like animation syntax. This library calculates the Animation when its initialized, not when executed, giving a huge performance boost! microAnimate also uses CSS based animating - which means it uses hardware acceleration.

Demo

Usage:

//Basic Syntax
var myAnimation = new Anim(element, {animation}, {options});


//Full Example
var myAdvancedAnimation = new Anim(
  document.getElementById("square"), {
    "0%": [
      ["width", "200px"],
      ["color", "transparent"]
    ],
    "20%": [
      ["width", "100px"],
      ["color", "#fff"],
      function() {
        console.log("callback 2");
      }
    ],
    "100%": [
      ["width", "60px"],
      ["color", "red"],
      function() {
        console.log("callback 3");
      }
    ]
  }, {
    duration: 2000,
    ticklength: 30,
    ease: true,
    retainEndState: true,
    loop: false
  }
);

Methods:

//Start the Animation
myAnimation.start();


//Stops the Animation & resets it to the initial state
myAnimation.stop();


//Pauses the Animation
myAnimation.pause();

//Unpauses the Animation
myAnimation.unpause();

Options:

duration:

the duration of the whole animation in ms
ease:

If the animation should be eased. Accepts either "true" or a custom CSS-easing.

default: false.
retainEndState:

If the animation should stay the way it finished or if it should be reseted to the initial state

default: true.
loop:

If the should loop. either false, true(infinite times) or integer(n times).

default: false.

Recommend Projects