The number one and most popular animation library on this list (with more than 900 contributors to the project), we have 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 includes but is not limited to the Anaglyph effects, perspective and orthographic cameras, tools of geometry such as plane, cube, sphere, 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, we have Anime JS as the number two on this list. Created by Julian Garnier, Anime JS is one of the fastest animation libraries you’d come across. Anime JS works smoothly with the DOM, and supports the major web browsers in Chrome, Firefox, Opera, Safari, Internet Explorer 10+. This library includes but is not limited to the following features, CSS transforms for animating CSS transforms, SVG animations for line, 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 wonderful 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 would 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 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**
Similar to Popmotion JS, Mo JS is number seven on the 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 in quick time. 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 JS takes the number eight position on this list. If you are looking for a great library for working with SVG on this list, then Vivus JS is the best option, especially for beginners. This library is also very fast and is lightweight too, as it has no dependencies. Asides 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 often referred to as GSAP (GreenSock Animation Platform) is one of the most popular libraries on the list.
GreenSock’s speed and high efficiency is one 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 JS.
**npm install gsap**
Using NPM, the following command can be used to install Animate On Scroll.
**npm install aos**
Wrapping It Up
How to Speed up your Web App and Improve Website Performance
Optimization of site performance is a big deal. It involves multiple aspects to take care of and many of them depend on the site itself, its complexity and elements. However, there is also a set of common optimization methods that work for any site.
5 DevOps Tools to use
While an understanding of various concepts drives DevOps, there are different tools out there to make it easier to implement these concepts. In this article, you'll learn about these tools and hopefully, begin using them as an integral part of your software release/maintenance toolkit.
14 Frequently Asked Questions about ReactJS
If you've chosen to use React, or you are considering it, you probably have questions you need answers to. We have gathered some of the frequently asked questions about React and will answer them here. The questions are going to be grouped into six segments, each about various aspects of React.
01 / 14