Anime.js – A Lightweight JavaScript Animation Library

Web animation has come a long way. Not only can developers make any animation using a combo of CSS/SVG/JS, but there are dozens of free libraries to save time in the process.

One of my favorites is Anime.js, a completely free, open source JavaScript animation library.

This library can do it all. It’s built on JavaScript but it also relies heavily on CSS animations. You can target individual page elements via the DOM or you can even target custom SVGs.

Read Also: 8 JavaScript Libraries to Animate SVG

All the documentation is self-hosted on GitHub, so you may need to scroll to find exactly what you’re looking for. But each animation feature comes with a few parameters such as delay, duration, and easing.

Note this library doesn’t come with many default animation styles. Anime.js is made for developers who want to customize their animations without writing verbose code.

For a live example, check out the Codepen pen below. The code is exceedingly simple but you get a believable animation with squash & stretch plus anticipation, both fundamentals of animation.

A fair warning: the Anime.js library is dense. It’s not all that hard to create a custom animation but you do need to understand some basics like easing and common JavaScript syntax for the callbacks & options.

But all the information you need is on the repo page, including lots of code samples and detailed documentation tables. And you can browse through open bug reports or check browser support which currently includes all major browsers and IE 10+.

This is easily one of the best animation libraries for web developers and it should be your go-to solution for any complex web animation.

To see a bunch of live examples, check out this collection of Anime.js demos hosted on CodePen. Below, I embedded my favorite which animates the entire logo from scratch, with real vivacity.

Read Also: 10 CSS3 Animation Tools You Should Bookmark