Animations can significantly improve 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 in order to create something where 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 want to only use specific components.
The library has a declarative API which is used to set 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 the 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 animation a more natural movement. The library also comes with many utility functions like angle, clamp, distance and snap etc. to use for calculations.
The marker animations in the above CodePen demo by Arden were animated using the Popmotion library.
ScrollReveal
The ScrollReveal library comes 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 crate 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 and 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 now 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 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 in 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 all 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 color of elements when users hover over them.
No comments:
Post a Comment