DEV Community

Pritesh Bhoi
Pritesh Bhoi

Posted on โ€ข Edited on

4

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 โค๏ธ

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

๐Ÿ‘‹ The next DEV Challenge is live

Participate in the Agent.ai Challenge

Make your life easier and win some cash? Sounds like a plan!

We are so excited to team up with Agent.ai for our next community challenge โ€“ can you guess what weโ€™ll be building?! ๐Ÿค–๐Ÿ˜Ž

Read more