image

JavaScript animation libraries

Notable libraries to enrich your content visually and create delightful animations

Animation in JavaScript has advanced drastically in all directions you can imagine, from animating text or an image to full-fledged 3D animation with tools like WebGL. There are many libraries that work with the canvas and WebGL to create interactive experiences.


Three.js

image

threejs.org

Three.js is an easy to use, lightweight, popular 3D JavaScript library that supports <canvas>, <svg>, CSS3D and WebGL renderers.

Popmotion

image

popmotion.io

Popmotion is a tiny animator's toolbox supports keyframe and spring animations for numbers, colors and complex strings.

Mo.js

image

mojs.github.io

Mo.js is a javascript motion graphics library provides built-in components to start animating from scratch like html, shape, swirl, burst and stagger, but also bring you tools to help craft your animation in a most natural way.

ScrollReveal

image

scrollrevealjs.org

ScrollReveal is a JavaScript library for easily animating elements as they enter/leave the viewport. It was designed to be robust and flexible, but hopefully you’ll be surprised below at how easy it is to pick up.

Typed.js

image

github.com

Typed.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.

Lottie

image

airbnb.io

Lottie is a mobile library that parses Adobe After Effects animations exported as json with Bodymovin and renders them on Web, Android, iOS, and React Native.

Anime.js

image

animejs.com

Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.

Velocity.js

image

velocityjs.org

Velocity is an animation engine with the same API as jQuery's $.animate(). It works with and without jQuery. It's incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined.

GSAP

image

greensock.com

Green Sock Animation Platform (GSAP) provides a fairly robust library that has animations for almost any type of effect your project could need.