DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Pritesh Bhoi
Pritesh Bhoi

Posted on • Updated on

10+ Best JavaScript Animation Libraries to Use in 2021

πŸš€ Anime.js

JavaScript Animation libraries.

Let’s start this list of JavaScript animation libraries with Anime.js. This lightweight animation library clocks 35K+ stars on GitHub. Working from a single powerful API, you can use it to animate HTML, CSS, JS, SVG and DOM attributes.

πŸš€ Velocity.js

Velocity.js combines the best of jQuery and CSS transitions. It rates close to 17K stars on GitHub and boasts of prominent users like WhatsApp and Mailchimp. Looping, reversing, delaying, hiding/showing elements, property math (+, -, *, /), and hardware acceleration, all form part of the features.

πŸš€ Popmotion

At close to 18K stars, Popmotion is a functional animation library for any JavaScript environment. It can work with just about any API that accepts numbers as inputs such as React, Three.js, A-Frame.

πŸš€ Three.js

Three.js tops this list of JavaScript animation libraries with 60K+ stars on GitHub. It’s dependent on WebGL to create and render 3D animations in the browsers.

πŸš€ GreenSock JS

GreenSock’s GSAP works with a set of small JavaScript files that make animations look great in all major browsers.

πŸš€ AniJS

Among the JavaScript libraries in this list, AniJS is somewhat unique. It allows you to add animations to elements in a simple β€˜sentence-like’ structure, great for folks new to animation.

πŸš€ Mo.js

Motion graphics has a big part to play in animations, and Mo.js is one option with which you can make an impact. With a number of tutorials and demos to help out, beginners may not find it hard to create geometrical shapes and time animations to the dot.

πŸš€ Vivus.js

If you wish to mimic a pen drawing on a screen in real-time, you’ll hit the mark with Vivus. It lets you animate SVGs giving the impression of being drawn.

πŸš€ ScrollReveal JS

If you wish to animate your web elements as they scroll into view, ScrollReveal won’t disappoint. This easy to learn animation library has zero dependencies and 18.5K+ stars on GitHub.

πŸš€ Typed.js

Typed.js is a simple library (more of a plugin, really) to animate typing on your screen.

πŸš€ Lottie by AirBnB

Lottie is a lightweight animated graphics format that balances high quality graphics against the cost of rendering them. It makes applications smaller and includes dynamic features.
Thanks ❀️

Top comments (0)

Classic DEV Post from 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!