We earn commission when you buy through affiliate links.
This does not influence our reviews or recommendations.Learn more.
Writing code to add animations can be a lot of work.
Luckily, you’re able to use an animation library.
An animation library is a collection of pre-made animation files that designers can add to their websites.
Why use animation libraries?
Mo.js
Mo.jsis a JavaScript motion graphics library.
The library gives you total control over the animations through its declarative API.
Popmotion
Popmotionis a simple animation library for creating delightful user interfaces.
I found it easy to use this library with vanilla JavaScript and most JavaScript libraries and frameworks.
Theatre.js
Theatre.jsis a library with a professional motion design toolset.
With it, you’re free to design cinematic scenes and delightful UI interactions.
Theatre.js is an open-source library.
ScrollReveal.js
ScrollReveal.jsis a JavaScript library that allows you to animate elements as they scroll into the viewport.
GreenSock GSAP
GreenSock GSAPis a JavaScript library for animatingSVG,UI,React, orThree.jscomponents.
The library has everything you better create fast and attractive animations.
GreenSock Animation Platform (GSAP) has a free package, while paid one starts from 88.
ProgressBar.js
ProgressBar.jsis an animation library for creating responsive and stylish progress bars for the web.
Using bower
bower install progressbar.js
Using npm
npm install progressbar.js
ProgressBar.js is an open-source library.
This library is 9.0kb after zipping.
Three.js
Three.jsis a general-purpose 3D library.
The library uses a WebGL renderer but also supports SVG and CSS3D renderers as add-ons.
npm install –save three
import * as THREE from ‘three’;
Three.js is an open-source JavaScript library.
Vivus.js
vivus.jsis a lightweight JavaScript library for animating SVGs.
When you animate SVGs using this library, they appear as if they have been drawn.
npm install vivus
bower install vivus
Vivus.js is a free library.
Tilt.js
Tilt.jsis a small JavaScript library that allows developers to create 3D tilt effects on the DOM.
Splide
Splideis a lightweight slider/carousel written in TypeScript.
npm install @splidejs/splide
Splide has a free package for personal use.
The choice of the animation library will depend on what you want to achieve and the ease of use.
Sometimes, you may use multiple animation libraries across different program pages.
