DEV Community

loading...

10+ Best JavaScript Animation Libraries to Use in 2021

Pritesh Bhoi
Frontend developer (web and mobile) | WordPress | Shopify | Squarespace. I'm available 30+hrs in a week. Let's Discuss Project
Updated on ・2 min read

🚀 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 ❤️

Discussion (0)