Performant JavaScript Animation Library – Animate Plus

Preview:

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