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. Check out this simple morphing animation demo and this performance/stress test of 500 SVG shapes animated independently.
Download and insert animate.min.js (3.6KB gzipped) :
<script src=animate.min.js></script>Start animating things:
animate({
el: "div",
translateX: 100,
opacity: .5,
duration: 500
});animate accepts either an Object or a Map containing at least an element and a property to animate:
animate({
el: "div",
opacity: 0
});
// Or:
var params = new Map();
params.set("el", "div");
params.set("opacity", 0);
animate(params);The elements to animate. el can either take a:
- 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")
The duration of your animation in milliseconds. Default: 1000.
The delay before your animation starts in milliseconds. Default: 0.
The easing type. Default: easeOutElastic. Possible values:
- 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
Boolean. Specifies if your animation should run indefinitely. Default: false.
The direction of your animation. Default: normal. Possible values:
- normal
- reverse
- alternate (only applies if your animation loops)
A function to trigger before your animation starts. An array of the elements selected with the el parameter is passed as the callback's first argument.
<!doctype html>
<title>Example</title>
<style>
div {
display: none;
width: 100px;
height: 100px;
background: black;
}
</style>
<div></div>
<div></div>
<script src=animate.min.js></script>
<script>
animate({
el: "div",
scaleX: 2,
begin: show
});
function show(elements) {
elements.forEach(function(el) { el.style.display = "block"; });
}
</script>Same as begin, but triggers the callback at the end of the animation instead.
Supported properties:
- opacity
- translateX
- translateY
- translateZ
- scaleX
- scaleY
- scaleZ
- rotateX
- rotateY
- rotateZ
- skewX
- skewY
- perspective
Animations start from default CSS values and end to the values you specify:
animate({
el: "div",
opacity: 0, // fades out from 1 to 0
translateX: 20 // slides to the right by 20px
});Alternatively, you can specify custom start values by passing an array:
animate({
el: "div",
opacity: [0, 1], // fades in from 0 to 1
translateX: [20, 0] // slides to the left from 20px to 0
});animate automatically adds units if they're missing (deg for rotate, px for translate and perspective) but you can specify them if needed:
animate({
el: "div",
translateX: "100%"
});SVG animations require an array with your start and end values. Any SVG attribute accepting numerical values can be animated:
var colors = ["#0bf", "#fc0"];
var points = ["96 180 37 180 0 180 0 69 0 0 96 0 191 0 191 69 191 180 154 180",
"95 147 36 180 50 114 0 69 67 61 95 0 122 61 190 69 139 114 153 180"];
animate({
el: "polygon",
easing: "easeOutCubic",
translateX: 200,
fill: colors,
points: points
});