Author: | bendc |
---|---|
Views Total: | 684 views |
Official Page: | Go to website |
Last Update: | July 19, 2018 |
License: | MIT |
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