Animations can significantly improve the user experience when used properly. There are many elements on a webpage that can be animated to make it come alive. Basic things like the background color of a button or the border-radius of some elements on a webpage can also be animated with CSS.
However, CSS has its limitations, and you will need to use JavaScript if you want more control over every aspect of the elements you are animating. In this article, I'll show you eight of the best free and open-source JavaScript animation libraries that you can use in your projects today.
Mo.js
Mo.js is an excellent library for adding JavaScript-based motion graphics to your website. It is very fast and produces smooth animations that look great on all kinds of devices. It is also modular, so you can avoid extra overhead if you only want to use specific components.
The library has a declarative API which is used to set the value of different properties for the components that you create. It comes with four different built-in modules called Html, Shape, ShapeSwirl, and Burst. The bursts and swirls can be used creatively for all kinds of user interactions with elements on your website.
Try clicking anywhere in the above CodePen and you will a nice little burst of circles and stars. It was created by LegoMushroom using the Burst and Shape module in mo.js.
The documentation of mo.js provides a lot of such interesting examples that can help you learn all aspects of the library.
Anime
Anime is one of the most popular animation libraries on GitHub. It is very lightweight and comes with a simple and easy-to-learn API. The library can be used to animate CSS properties, SVG, and DOM attributes.
It gives you a lot of control over the way in which elements are animated. You can control the speed, direction, and order in which things move around. There are options to pause, restart, or reverse an animation whenever you choose to do so.
The library also has decent support for SVG animation. You can create a smooth morph effect between two different SVG shapes or create a line-drawing animation.
Try clicking the Write the Name button in the above CodePen, and you will see the letters of my first name animated one at a time. This demo was part of a series of tutorials about Anime. You can check them out to learn more about the library.
Popmotion
Popmotion is yet another lightweight and popular animation library. You can use it to animate numbers, colors, and complex strings. The main animate function in the library is just around 5kb, and the whole library is around 12kb.
You can use it to create two kinds of animations: keyframes and springs. You can provide a from and to point for keyframe animation, among other things. The spring animations come with properties like stiffness, damping, mass, and velocity to give your animation a more natural movement. The library also comes with many utility functions to use for calculations, like angle, clamp, distance, snap, etc.
The keyframe animation in the above CodePen demo by gaougalos was animated using the Popmotion library.
ScrollReveal
The ScrollReveal library comes in handy when you want to animate elements as they scroll into or out of the viewport.
There are a lot of options available for animating the elements. You have control over the progress of the animation with delay, duration, and interval properties. There are also options to control the rotation, scale, and movement of the objects you are revealing. The library also comes with callbacks that can be used to determine what happens before or after an element has been revealed.
The above CodePen demo by Sava Lazic creates a visually appealing vertical timeline using the ScrollReveal library. You can create something similar to showcase products or projects on your website.
Vivus
Vivus is an amazing JavaScript-based animation library that has been created to specifically animate SVGs. It is very lightweight and has no dependencies.
Vivus offers you three different ways for animating the paths in an SVG. You can animate the lines all at once, with a delay, or one after the other. It also gives you a lot of flexibility when setting the timing of the animation.
A few things that you should keep in mind with Vivus is that it always animates elements in the order in which they are defined in the SVG. Also, the elements you want to animate should have a stroke instead of a fill.
The nice animation of SVG paths in the above CodePen demo by Alex Nelson was created with just six lines of code and some help from Vivus.
Typed.js
You can guess from the name Typed.js that this animation library is used to type text. You can pass all the strings that you want to type as an array. The library has also implemented a more SEO-friendly approach in which the text you want to animate with typing can be read from an HTML div on the webpage.
The behavior of the typing animation can be fine-tuned with the help of a bunch of parameters. This includes the typing speed, backspacing speed, start delay, back delay, loop count, etc. You can also define a bunch of callback functions that are fired at different events like after typing out a string.
The above CodePen by Conner illustrates how we can use this library to make a dull 404 error page interesting.
ProgressBar.js
Adding progress bars to any process which will take a bit of time to complete is a good idea. This lets users know how fast the task is progressing. For example, you can show a progress bar in an online image editor to let users know that the page isn't just stuck but is actually working on the image in the background.
The ProgressBar.js library makes it incredibly easy for developers to add stylish progress bars to their websites. Besides creating progress bars with some built-in shapes like a line, circle, or semi-circle, you also have the option to use your own custom shapes. This opens up a bunch of interesting possibilities.
As you can see in the above demo, we can animate a variety of properties in our progress bars. You can check out this introductory ProgressBar.js tutorial to learn more about the library.
Lottie
Lottie by Airbnb is an animation library like no other we have discussed so far. It parses animations created by Adobe After Effects which have been exported as JSON with Bodymovin. You can render these effects directly on your webpages after that.
The GitHub page for the library explains the installation process and how it works in detail. There are many global methods available for you to control the animation progress. You can easily start, stop, and reverse the animation direction.
You only need to write a few lines of code to load the required JSON file and initialize the animation with some parameters. The above CodePen demo by kittons is a great example to show how you can render your After Effects animations inside a browser with minimal effort.
Final Thoughts
In this article, we looked at eight popular free and open-source JavaScript animation libraries. They each do something a bit different and target different aspects of web animation. With these libraries, you will be able to animate almost everything on your website. I hope you use these libraries to create a fancy website that sets you apart from the competition! Just make sure that you don't overdo the animations.
One more thing to keep in mind is that you should still try to use CSS for simple animations. It doesn't make a lot of sense to load a full JavaScript animation library if all you want to do is just change the color of elements when users hover over them.
