JavaScript Animation Libraries

Updated Sep 09, 2021#javascript#libs#lists

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 - Easy to use, lightweight, popular 3D JavaScript library that supports <canvas>, <svg>, CSS3D and WebGL renderers.
  • Popmotion - Tiny animator’s toolbox supports keyframe and spring animations for numbers, colors and complex strings.
  • Mo.js - 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 - A 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 - 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 - 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 - A lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.
  • Velocity.js - 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 - Green Sock Animation Platform (GSAP) provides a fairly robust library that has animations for almost any type of effect your project could need.