Animate Plus is a CSS and SVG animation library for modern browsers. Animate Plus is performant and lightweight (2.8KB gzipped), making it particularly well-suited for mobile.
- Performance/stress test: hold the mouse down and make DOM elements bloom!
- Real-world example: all the CSS and SVG animations on this page are made with Animate Plus.
npm install animateplus or download and insert animate.min.js:
<script src=animate.min.js></script>Start animating things:
animate({
el: "div",
translateX: 100,
opacity: 0,
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 take any of these types:
| Type | Example |
|---|---|
| CSS selector | "div" |
| jQuery object | $("div") |
| DOM element | document.querySelector("div") |
| NodeList | document.querySelectorAll("div") |
| HTMLCollection | document.getElementsByTagName("div") |
| Array | [document.querySelector("div")] |
| Set | new Set().add(document.querySelector("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. You can preview the possible values listed
below with the easing visualizer tool.
| linear | ease in | ease out | ease in out |
|---|---|---|---|
| linear | easeInQuad | easeOutQuad | easeInOutQuad |
| easeInCubic | easeOutCubic | easeInOutCubic | |
| easeInQuart | easeOutQuart | easeInOutQuart | |
| easeInQuint | easeOutQuint | easeInOutQuint | |
| easeInSine | easeOutSine | easeInOutSine | |
| easeInExpo | easeOutExpo | easeInOutExpo | |
| easeInCirc | easeOutCirc | easeInOutCirc | |
| easeInElastic | easeOutElastic | easeInOutElastic | |
| easeInBack | easeOutBack | easeInOutBack | |
| easeOutBounce |
The frequency of elastic curves can be configured by passing a number between 0 and 1000 (default: 500).
animate({
el: "div",
translateY: "200%",
easing: "easeOutElastic 700"
});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:
- translateX - translateY - translateZ
- scale - scaleX - scaleY - scaleZ
- rotate - rotateX - rotateY - rotateZ
- skewX - skewY
- opacity
- 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 containing at least some numeric values can be animated:
var colors = ["#80f", "#fc0"];
var points = [
"M54,271 L0,271 L0,103 L0,0 L142,0 L285,0 L285,103 L285,271 L230,271 L142,271 Z",
"M54,271 L71,172 L0,103 L98,89 L142,0 L186,89 L285,103 L213,172 L230,271 L142,224 Z"
];
animate({
el: "path",
fill: colors,
d: points
});animate.stop(el) stops all animations running on el (which can be any of these values).
var div = document.querySelector("div");
animate({
el: div,
rotate: 180
});
// Stop the rotation on click
div.addEventListener("click", function() {
animate.stop(div);
});- Line-drawing animation screencast
- Parallax icon
- SVG morphing button 1
- SVG morphing button 2
- 250 SVG circles (mouseover the elements)
- Bouncing circle of DOM elements (mouseover the elements)
- Bendy paths based on the
<use>SVG element.