Animations are a great way to make your website stand out from the crowd and grab the attention of your visitors. With creative object motion and fluid page transitions, you can impress your users with rich, engaging experiences that make a good first impression.
Sometimes the animations you’ll want to add will be quite basic, and CSS will be good enough to create them. For more complex and interactive effects, however, JavaScript would be a better choice. Using JavaScript to create animations will give you a finer degree of control over them, and will allow you to easily coordinate the change in position, color, size, etc. of multiple objects at the same time. Plus, you’ll be able to make use of variables, functions, and control structures to implement complicated logic and avoid repeating yourself. The typical ways of creating animations in JavaScript make use of the classic setInterval() function, the smoother requestAnimationFrame() function, or the newer Element.animate() method.
This article goes through a list of 13 powerful and popular JavaScript libraries that simplify the process of creating animations. Some of these libraries are general-purpose, in that they can be used in a broad range of scenarios, while others focus on a specific use case, doing one thing and doing it well.
1. Anime.js
Anime.js is one of the most popular animation libraries out there, with over 43k stars on GitHub. It is a lightweight JavaScript animation library with a simple API that can be used to animate CSS properties, SVG, DOM attributes, and JavaScript objects. With Anime.js, you can play, pause, restart or reverse an animation. The library also provides staggering features for animating multiple elements with follow-through and overlapping actions. There are various animation-related events also included, which we can listen to using callbacks and Promises.
2. Lottie
Lottie is a library that parses Adobe After Effects animations exported as JSON with the Bodymovin plugin and renders them natively on mobile and web applications. This eliminates the need to manually recreate the advanced animations created in After Effects by expert designers. The Web version alone has over 27k stars on GitHub.
3. Velocity
With Velocity, you can create color animations, transforms, loops, easings, SVG animations, and more. It was designed to use the same API as the $.animate() method from the jQuery library, and it can integrate with jQuery if it is available. The library provides fade, scroll, and slide effects. Besides being able to control the duration and delay of an animation, you can reverse it sometime after it has been completed, or stop it altogether when it is in progress. It has over 17k stars on GitHub and is a good alternative to Anime.js.
4. Rough Notation
Rough Notation is a JavaScript library for creating and animating colorful annotations on a web page. It uses RoughJS to create a hand-drawn look and feel. You can create several annotation styles, including underline, box, circle, highlight, strike-through, etc., and control the duration and color of each annotation style.
Visit the Rough Notation website
5. Popmotion
Popmotion is a functional library for creating prominent and attention-grabbing animations. What makes it stand out is that it does not make any assumptions about the object properties you intend to animate, but instead provides simple, composable functions that can be used in any JavaScript environment.
The library supports keyframes, spring and inertia animations on numbers, colors, and complex strings. It is well-tested, actively maintained, and has over 19k stars on GitHub.
6. Vivus
Vivus is a JavaScript library that allows you to animate SVGs, giving them the appearance of being drawn. It is fast and lightweight, as it has zero dependencies. It provides three different ways to animate SVGs: Delayed, Sync, and OneByOne. You can also use a custom script to draw an SVG in your preferred way.
Vivus also allows you to customize the duration, delay, timing function, and other animation settings. Check out Vivus Instant for live, hands-on examples.
7. GreenSock Animation Platform (GSAP)
The GreenSock Animation Platform (GSAP) is a library that lets you create wonderful animations that work across all major browsers. You can use it in React, Vue, WebGL, and the HTML canvas to animate colors, strings, motion paths, and more. It also comes with a ScrollTrigger plugin that lets you create impressive scroll-based animations with little code.
Used in over 11 million sites, with over 15k stars on GitHub, GSAP is one of the most approved animation utilities on this list. You can use the GSDevTools from GreenSock to easily debug animations created with GSAP.
8. Three.js
Three.js is a lightweight library for displaying complex 3D objects and animations. It makes use of WebGL, SVG, and CSS3D renderers to create engaging three-dimensional experiences that work across a wide range of browsers and devices. It is a well-known library in the JavaScript community, with over 85k stars on GitHub.
9. ScrollReveal
The ScrollReveal library lets you easily animate a DOM element as it enters or leaves the browser viewport. It provides various types of elegant effects to reveal or hide an element on-scroll in multiple browsers. It is an easy-to-use library with zero dependencies and over 21k stars on GitHub.
Visit the ScrollReveal website
10. Barba.js
One creative way to make your website outstanding is to add lively transitions between the pages as your users navigate between them. This produces a better UX than simply displaying the new webpage or reloading the browser.
Barba.js is a library that lets you create such page transitions by making the site run like an SPA (Single Page Application). It reduces the delay between pages and minimizes the number of HTTP requests that the browser makes. It has received almost 10k stars on GitHub.
11. Mo.js
A great library for creating compelling motion graphics is Mo.js. It provides simple, declarative APIs for effortlessly creating smooth animations and effects that look great on devices of various screen sizes. You can move HTML or SVG DOM elements, or you can create a special Mo.js object, which comes with a set of unique capabilities. It is a reliable and well-tested library, with over 1500 tests written and more than 17k stars on GitHub.
12. Typed.js
Typed.js can simply be described as an animated typing library. It types out a specific string character by character as if someone was typing in real-time. You can customize the typing speed, and even pause the typing for a specific amount of time. With smart backspacing, it can type out successive strings that start with the same set of characters as the current one without backspacing the entire preceding string.
Also included is support for bulk typing, which makes a group of characters to be typed out on the screen at the same time, instead of one after the other. Typed.js has over 12k stars on GitHub and is trusted by Slack and Envato.
13. Parallax.js
With Parallax.js, you can make elements on your webpage react to the orientation of a smart device. If it can’t detect a gyroscope or motion detection hardware, then the elements will respond to the position of the cursor. The responsiveness to input can make for an outstanding and highly interactive website. This interesting capability has made the library gain almost 16k stars on GitHub.
Conclusion
With these robust and flexible JavaScript animation libraries, you’ll find it much easier to create stunning effects that bring about delightful and enjoyable user experiences.
Every Crazy Thing JavaScript Does
A captivating guide to the subtle caveats and lesser-known parts of JavaScript.
Ayibatari Ibaba is a software developer with years of experience building websites and apps. He has written extensively on a wide range of programming topics and has created dozens of apps and open-source libraries.
