Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

10 JavaScript Animation Libraries to Follow in 2018

DZone's Guide to

10 JavaScript Animation Libraries to Follow in 2018

A look at some great animation libraries for JavaScript developers, with HTML, CSS, and JavaScript code samples included!

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Image title

The client-side of a modern day website feeds off quality animation, which has lead to a rise in the need for JavaScript animation libraries. Fortunately, the supply seems to have matched the demand and there are a lot of options out there. However, making a choice on which library to go with could cause a lot of headaches. A lot of libraries have the potential to become better over the course of the year and would be the go-to solutions for creating animations.

Let’s take a look at the top ten JavaScript animation libraries.

Three.js

42,569 

The number one and most popular animation library on this list (with more than 900 contributors to the project), is Three.js. Still going strong after eight years, Three.js remains a powerful animation tool. Dependent on WebGL, Three.js can be used to build wonderful 3D computer graphics to run on web browsers. The features of Three.js include, but are not limited to, the Anaglyph effects, perspective and orthographic cameras, tools of geometry such as plane, cube, sphere, and torus. One disadvantage of this library however, is that some developers find it slow to use.

Installation:

Using NPM, the following command can be used to install Three.js.

npm install three

More information can be found on the official website or the npm website.

anime.js

21,084 

A possible replacement for Three.js, anime.js comes in at number two on this list. Created by Julian Garnier, anime.js is one of the fastest animation libraries you’ll come across. anime.js works smoothly with the DOM and supports major web browsers like Chrome, Firefox, Opera, Safari, and Internet Explorer 10+. This library includes, but is not limited to, the following features: CSS transforms for animating CSS transforms, SVG animations for lines, and a timeline for synchronizing multiple instances. One thing that makes anime.js appealing to developers is that it is very lightweight.

Installation:

Using NPM, the following command can be used to install anime.js.

npm install animejs

More information can be found on the official website and the npm website.

Particles.js

15,612 

The third library we'll take a look at is the Particles.js library. Created by Vincent Garreau, Particles.js is an animation specific JavaScript library for creating wonderful animations with dots and lines. As stated earlier, this library is used to create animations that look like particles. Therefore, it allows developers to toggle things such as the density, color, opacity, shape, and size of the particles. However, since it is only for particle backgrounds it is not suitable for creating other kinds of animations.

Installation:

Using NPM, the following command can be used to install Particles.js.

npm install particlesjs

For more information, visit the official website or the npm website.

ScrollReveal JS

15,499 

scrollReveal.js takes the number four spot on our list, and just like Particles.js, it is also an animation-specific JavaScript library. Used for creating amazing scroll animations, scrollReveal.js is a lightweight tool (it doesn’t have any dependencies) and is quite easy to use, as “natural language” is used for sending instructions for creating animations. scrollReveal.js works fine with DOM nodes, multiple containers, asynchronous content, and it supports 3D rotation. The best tool you may get for on scroll animations, it supports a lot of web browsers, provided that they support CSS Transform and CSS Transition.

Installation:

Using NPM, the following command can be used to install scrollReveal.js.

npm install scrollreveal

More information can be found on the official website and the npm website.

Velocity.js

14,692 

Next on this list of wonderfully amazing animation libraries is Velocity.js. The sweetheart of a lot of UI designers, this tool makes it easy to create powerful web animations simply by using HTML and SVG. Velocity.js can be used to scroll browser windows and even undo previous animations. One of the few animation tools you'll find that is independent of the powerful jQuery framework despite using the same API as jQuery’s $.animate(). Services such as WhatsApp and MailChimp are known users of this wonderful tool.

Installation:

Using NPM, the following command can be used to install Velocity.js.

npm install velocity-animate

More information can be found on the official website and the npm website.

Popmotion

13,777 

Popmotion comes in sixth. A similar library to the anime.js, Popmotion can be used to build wonderful browser animations. This library also has features such as pointer tracking, spring physics, animation of 3D objects, etc., and does fine with creating functional, reactive animations.

Installation:

Using NPM, the following command can be used to install Popmotion JS.

npm install popmotion

More information can be gotten from the official website or the npm website.

mo.js

13,461 

With similar functionality to Popmotion, mo.js comes in at number seven on this list. A simplistic library for creating web animations, it is easy to learn, as the creator Oleg Solomka has created a lot of tutorials and demos to help get beginners on board quickly. mo.js also comes with features to create shapes such as circles, polygons, rectangles, lines, etc. mo.js may look simple to use, but it is capable of building really sophisticated motion graphics web animations.

Installation:

Using NPM, the following command can be used to install mo.js.

npm install mo-js

More information can be found on the official website and the npm website.

Vivus.js

10,365 

Vivus takes the number eight position on this list. If you are looking for a great library for working with SVG, then Vivus.js is the best option, especially for beginners. This library is also very fast and lightweight, as it has no dependencies. Besides working with SVG, Vivus.js can also be used to create wonderful buttons and there are a lot of other amazing animations available for use.

Installation:

Using NPM, the following command can be used to install Vivus.js.

npm install vivus

More information can be gotten on the official website and the npm website.

GreenSock

7,767 

Overlook its position on this list - GreenSock is often referred to as GSAP (GreenSock Animation Platform) and is one of the most popular libraries on the list.

GreenSock’s speed and high efficiency are some of the reasons why it is cherished. This great library also works fine across a huge range of web browsers and has zero dependencies.

Installation:

Using NPM, the following command can be used to install GreenSock.

npm install gsap

More information can be found on the official website and the npm website.

AOS

6,613 

So while the other libraries discussed in the article are heavily dependent on JavaScript, AOS (Animate On Scroll) is much more dependent on CSS than JavaScript. With AOS, developers can animate page elements during a down scroll and then reverse the animation to the previous state during an up scroll. This library also comes with a lot of predefined events that can be triggered by a scrolling event.

Installation:

Using NPM, the following command can be used to install Animate On Scroll.

npm install aos

More information can be found on the official website and the npm website.

Wrapping Up

Image title

There you have it. The top ten JavaScript libraries for creating beautiful animations. Have you used any of these libraries and have a word or two on the user experience? Or is there any library you think should have made the list but didn’t? Let’s talk about it.

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:
npm ,animation libraries ,javascript libraries ,web dev ,front-end development

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}