Performant JavaScript Animation Library – Animate Plus

Category: Animation , Javascript , Recommended | July 19, 2018
Author: bendc
Views Total: 2,476
Official Page: Go to website
Last Update: July 19, 2018
License: MIT

Preview:

Performant JavaScript Animation Library – Animate Plus

Description:

Animate Plus is a performant JavaScript library that helps you animate CSS properties and SVG attributes. Animate Plus is well-suited for quick UI interactions as well as longer animation sequences on both desktop and mobile.

CSS Animation included:

  • opacity
  • translateX
  • translateY
  • translateZ
  • scaleX
  • scaleY
  • scaleZ
  • rotateX
  • rotateY
  • rotateZ
  • skewX
  • skewY
  • perspective

Easing types included:

  • linear
  • easeInQuad
  • easeInCubic
  • easeInQuart
  • easeInQuint
  • easeInSine
  • easeInExpo
  • easeInCirc
  • easeInElastic
  • easeInBack
  • easeOutQuad
  • easeOutCubic
  • easeOutQuart
  • easeOutQuint
  • easeOutSine
  • easeOutExpo
  • easeOutCirc
  • easeOutElastic
  • easeOutBack
  • easeOutBounce
  • easeInOutQuad
  • easeInOutCubic
  • easeInOutQuart
  • easeInOutQuint
  • easeInOutSine
  • easeInOutExpo
  • easeInOutCirc
  • easeInOutElastic
  • easeInOutBack

Basic usage:

Download and include the animate plus JavaScript library in the document.

<script src=animate.min.js></script>

Animate elements with custom parameters.

animate({
  el: "div",
  opacity: 0
});

// Or:
var params = new Map();
params.set("el", "div");
params.set("opacity", 0);
animate(params);

All parameters.

animate({

/*  
The elements to animate:
CSS selector: "div"
jQuery-like object: $("div")
DOM element: document.querySelector("div")
Array of DOM elements: [document.querySelector("div")]
NodeList or HTMLCollection: document.getElementsByTagName("div")
*/
el: "div",

// The duration of your animation in milliseconds.
duration: 1000,

// The delay before your animation starts in milliseconds. 
delay: 0,

// The easing type.
easing: "easeOutElastic",

// Animation speed
speed: 1

// The animation type.
opacity: 0,

// Specifies if your animation should run indefinitely.
loop: false,

// Forces hardware acceleration during an animation if set to true
optimize: false

// The direction of your animation. 
// normal, reverse or alternate
direction: "normal",

// Simulates a motion blur effect.
// e.g. blur: {x: 20, y: 2}
blur: null

// invoked on every frame of the animation
change: null

});

Changelog:

v2.1.1 (07/19/2018)

  • Update

You Might Be Interested In:


Leave a Reply