If you’re looking to grab your website visitor’s attention, what can be better than animations? Using the many application engines freely available on the web, you can easily get your website’s elements to fade, bounce or whoosh. In today’s post, we’ll see how JavaScript animation libraries can help with all that.
First, a little about JavaScript animations
It’s one thing to add simple animations that need just one action (for instance, toggling). For this, you can always use simple CSS animations. But, for more complex or advanced effects, JavaScript is a better tool. It goes without saying that using JavaScript to create animations is more challenging than using CSS.
Nevertheless, JavaScript can handle things that CSS can’t. This gives developers way more power to control complex animations that need to coordinate multiple moving parts.
JavaScript animations are implemented by adding gradual changes to an element’s style. You can add them in-line as part of your code, or include them in other objects. When rendering, these changes are called up by a timer. Also, you can control the continuity of the animations by adjusting the time interval of the changes.
The best JavaScript animation libraries
Here’s a list of JavaScript animation libraries that you can use to add some awesome-looking animations to your website:
1. Anime.js
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. With a built-in staggering system, it can make creating ripples, directional movements, follow-through and overlapping effects appear simple. This system is usable on both timings and properties.
There’s a lot you can do using the built-in callback and control functions. For instance, you can play, pause, control, reverse and trigger events in sync. To see what else is possible using this library, you can visit Codepen.
2. 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.
You can use Velocity.js to scroll browser windows. It can work both with jQuery loaded in your browser and independent of it, and even undo previous animations.
3. 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 and PixiJS.
Popmotion weighs only 11.7kB, but packs a punch nevertheless. It features animations like keyframes, decay, timeline for synchronizing multiple instances and more. You can stagger any series of animations or functions, as well as use pure functions to compose your own configurations.
4. 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 browser.
There’s a ton of documentation to help you, and once you get past the learning curve, there’s not much you cannot accomplish using this library. Firstly, using the Three.js editor, you create a scene. Thereafter, you get to add geometrical figures, and adjust lighting and camera. The material, texture, object, color and fogging can all be tweaked, and the final file published to your project.
5. GreenSock JS
GreenSock’s GSAP works with a set of small JavaScript files that make animations look great in all major browsers. It smoothly chains multiple animation properties and eliminates browser bugs.
GSAP actions include creating animations on Canvas and animating any object in a scene. Also progressively revealing, morphing or moving any object along a path. For this purpose, it works with a bunch of software applications like SVGPlugins, PixiPlugin, WebGL, Adobe Animate and EaseJS. Its modular structure helps you choose just the functions you need. With 8 million users and 10K+ stars on GitHub, this powerful library has a lot going for it.
6. 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. What’s more, its non-specific nature allows almost everyone to use it in routine UX design.
On GitHub, AniJS rates more than 3.5K stars. It does not rely on any third-party library and generally helps to speed up development. It works just as well on Android and iOS, and also in all the popular browsers.
7. 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.
The APIs may appear simple, but there’s a lot you can do with them. Within the toolkit, you’ll find a Curve Editor and Timeline Editor to help you build your animations, as well as a Player to control your animations. There are different modules for staggering, easing, timeline and more. All this earns Mo.js close to 16K stars on GitHub.
8. 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. Since it has no dependencies, it’s fast and lightweight.
You can choose any of the available animations – Delayed, Sync or OneByOne. Else, you can also create a custom script to draw your SVG. For more flexibility, you can override the animation of each path using a simple JavaScript function. More than 13K users give a thumbs-up to this library on GitHub.
9. 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.
ScrollReveal supports different types of effects and works well with web and mobile browsers. It intentionally works with a bare-bones configuration, so you can use it as a canvas for your creativity. To maximize the effect of the animations, the creators advise that you use it sparingly.
10. Typed.js
Typed.js is a simple library (more of a plugin, really) to animate typing on your screen. Once you enter any string, a visitor can watch it being typed at a set speed. Not only that, you can work the backspace button, as well as begin a new sentence. If you wish to allow visitors with JS disabled to also view it, you simply need to place an HTML div on the page. That way, bots and search engines also get to view the typed words.
This library rates 9.5K+ stars on GitHub. Power users include Slack and Envato.
11. 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. It can be used for web, Android, iOS and IoTs, without the need for additional software.
Lottie can run on any browser that supports JavaScript. The animations are stored in plain text and are human readable. Since the text data is stored in the JSON format, it’s easily assimilated with any JavaScript environment. This makes it a popular animated graphics format to enhance mobile frontends. The android version alone enjoys close to 30K stars on GitHub.
Top comments (1)
Thanks! Really helpful!