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.
Our handpicked selections to level up your animations 📈
Below is a list of the animation libraries that we believe stand out and that will make your projects stand out as well. Check them out and let us know if we missed any in the comments. Enjoy!
1. Anime.js

Let’s start this list of JavaScript animation libraries with Anime.js. This lightweight animation library clocks 49K+ stars on GitHub. Working from a single powerful API, you can use it to animate HTML, JS, CSS, 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.
In addition to staggering animations, Anime.js also offers easing, sphere, layered, and logo animations. You’ll be able to animate multiple CSS transform properties in the keyframes, simultaneously with different timings, on a single HTML element.
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.
Download via NPM or Yarn 📥
npm install animejs --save
yarn add animejs
2. Motion One

Motion One is a modern web animation library that utilizes the Web Animations API, allowing for performance that is often smoother and less resource-intensive compared to other libraries. It offers features like hardware-accelerated animations, springs, timelines, and the ability to animate HTML or SVG elements directly. Moreover, its API simplifies the complexity of native browser animations and extends functionality, all while being highly efficient with a tiny file size compared to others like the more well-known GSAP (which is also featured on our list).
Motion One’s use of TypeScript is notably advantageous for those developers who either prefer or require TypeScript for their projects. The language’s strong typing and robust features facilitate the maintenance of larger codebases and enhance error detection, which can significantly streamline the development process.
Download via NPM or Yarn 📥
npm install motion
yarn add motion
3. Velocity.js

Velocity.js combines the best of jQuery and CSS transitions. Its rating is over 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.
Velocity uses its own animation stack replacing all instances of jQuery’s $.animate() with velocity $.animate() to boost performance across all browsers and devices, especially on mobile.
Download via NPM or Yarn 📥
npm install velocity-animate
yarn add velocity-animate
4. Theatre.js

Theatre.js is an animation library for high fidelity motion graphics. It helps you design micro interactions that enable you to create intricate movement, and convey nuance. Working visually or with code, you can choreograph generative interactive art and iterate with ease using the cutting-edge sequence editor. Using your own tools or the official extensions, you’ll be able to do many things – like manipulate camera angles, adjust lights or shades and more.
Theatre.js is a work-in-progress design tool suitable for creating any animations from simple UI interactions to complex cinematic scenes. It aims to blur the line between designer and developer; author and consumer; and artist and scientist. It works by changing the JS variables and therefore, can work with any stack like Three.js or with any frontend library or framework. It enjoys a star rating of more than 11K on GitHub.
Download via NPM or Yarn 📥
npm install @theatre/core
yarn add @theatre/core
Code language: CSS (css)
5. Popmotion

Coming in with a rating of close to 20K 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 libraries are a good fit for building delightful user interfaces. It’s written in TypeScript, and every function is individually portable into any JavaScript environment.
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.
Download via NPM or Yarn 📥
npm install popmotion
yarn add popmotion
6. Three.js

Three.js tops this list of JavaScript animation libraries with more than 102K stars on GitHub. It’s dependent on WebGL to create and render 3D animations in the browser. Three.js is helpful in creating scenes, lights, shadows, materials, textures and more. It helps you do stuff that you’d have to code if you were using WebGL. Another nice feature of Three.js that within its animation system, you can animate various properties of your models.
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. First, using the Three.js editor, you create a scene. After that, you can add geometrical figures, and adjust lighting and camera settings. The material, texture, object, color and fogging can all be tweaked, with the final file published to your project.
Download via NPM or Yarn 📥
npm install three
yarn add three
7. 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. In addition, it supports fluid, fast performance with amazing sequencing abilities, runtime controls and zero dependencies.
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 millions of users and near 20K stars on GitHub, this powerful library has a lot going for it.
Download via NPM or Yarn 📥
npm install gsap
yarn add gsap
8. AniJS

Among the JavaScript libraries in this list, AniJS is somewhat unique. In plain English, it can be best described as a UI interaction library for Web Designers. 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.9K 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.
Download via Bower (NPM unavailable) 📥
bower install anijs --save
9. 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, and you can download just the specific modules you need for your current project. The screen density independent effects allow your animations to look good on any device. All this earns Mo.js more than 18K stars on GitHub.
Download via NPM or Yarn 📥
npm install @mojs/core
yarn add @mojs/core
Code language: CSS (css)
10. 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. In addition, the Scenarize feature allows you to script the animation of your SVG. More than 15K users give a thumbs-up to this library on GitHub.
Download via NPM or Bower 📥
npm install vivus
bower install vivus
11. 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 22K+ 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.
There’s also an option to enable/ disable animations on desktop browsers. ScrollReveal.js uses a single 3Dmatrix to power animations. This helps to steer clear of any existing CSS transform styles. At the same time, it means that ScrollReveal only understands a few unit types.
Download via NPM 📥
npm install scrollreveal
12. 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 15K+ stars on GitHub. It can be used with ReactJS, VueJS and as WebComponent. Power users include Slack and Envato.
Download via NPM or Yarn 📥
npm install typed.js
yarn add typed.js
Code language: CSS (css)
13. Lottie by AirBnB

Lottie is a lightweight animated graphics format that balances high quality graphics against the cost of rendering them. The workflow in Lottie lets motion designers work in AfterEffects and then export their work to an intermediary json format and into the app’s asset folder. 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 over 35K stars on GitHub.
Download via NPM or Yarn 📥
npm install lottie-web
yarn add lottie-web
If you’ve reached the end of this list, you may also be interested in looking up other JavaScript libraries and frameworks. Or, check out these best React UI component libraries.
…
Don’t forget to join our crash course on speeding up your WordPress site. Learn more below:
Layout and presentation by Karol K.