Join the DZone community and get the full member experience.Join For Free
Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.
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.
Using NPM, the following command can be used to install Three.js.
npm install three
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.
Using NPM, the following command can be used to install anime.js.
npm install animejs
Using NPM, the following command can be used to install Particles.js.
npm install particlesjs
Using NPM, the following command can be used to install scrollReveal.js.
npm install scrollreveal
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.
Using NPM, the following command can be used to install Velocity.js.
npm install velocity-animate
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.
Using NPM, the following command can be used to install Popmotion JS.
npm install popmotion
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.
Using NPM, the following command can be used to install mo.js.
npm install mo-js
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.
Using NPM, the following command can be used to install Vivus.js.
npm install vivus
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.
Using NPM, the following command can be used to install GreenSock.
npm install gsap
Using NPM, the following command can be used to install Animate On Scroll.
npm install aos
Published at DZone with permission of Anton Shaleynikov . See the original article here.
Opinions expressed by DZone contributors are their own.