Top JavaScript Animation Libraries

Filters

Top 5 Projects Compared

anime
49,591

juliangarnier/anime is a lightweight JavaScript animation library with a simple, yet powerful API for creating smooth animations and transitions.

Code Example

anime({
  targets: '.element',
  translateX: 250,
  rotate: '1turn',
  duration: 800
});

Pros

Lightweight and performant compared to larger libraries like GSAP
Easy to use with a clean, intuitive API
Supports a wide range of animation properties and easing functions

Cons

Less feature-rich compared to more comprehensive libraries like GSAP or Velocity.js
Limited built-in support for complex SVG animations compared to specialized libraries like Vivus or SVG.js
Lacks some advanced timeline features found in libraries like GSAP

scrollreveal
22,336

ScrollReveal is a JavaScript library for easily animating elements as they enter/leave the viewport.

Code Example

ScrollReveal().reveal('.element', {
    delay: 200,
    distance: '50px',
    origin: 'bottom'
});

Pros

Specifically designed for scroll-based animations, making it easy to implement common scroll effects
Lightweight and performant, with minimal impact on page load times
Supports both JavaScript and CSS-based animations for flexibility

Cons

Limited to scroll-based animations, unlike more versatile animation libraries like GSAP or Anime.js
Lacks advanced features for complex animations or timeline control found in some other libraries
Not as actively maintained as some other popular animation libraries in the list

GSAP
19,508

GSAP (GreenSock Animation Platform) is a robust JavaScript animation library for creating high-performance, professional-grade animations for the web.

Code Example

gsap.to(".box", {duration: 1, x: 100, y: 100, rotation: 360});
gsap.timeline()
  .to(".box1", {duration: 1, x: 100})
  .to(".box2", {duration: 1, y: 100});

Pros

GSAP offers superior performance and smooth animations, even for complex sequences.
It provides a comprehensive set of features and plugins for advanced animation control.
GSAP has excellent browser compatibility and works well with various frameworks.

Cons

GSAP has a steeper learning curve compared to simpler animation libraries.
The full version of GSAP requires a paid license for commercial use.
It may be overkill for simple animation needs, where lighter alternatives might suffice.

mojs
18,368

Mo.js is a JavaScript animation library that allows for creating motion graphics with HTML and SVG.

Code Example

const circle = new mojs.Shape({
  shape: 'circle',
  scale: { 0: 1 },
  duration: 1000
}).play();

Pros

Offers unique and powerful tools for creating complex animations and motion graphics
Provides a declarative API that makes it easy to create and control animations
Supports both HTML and SVG animations, offering versatility in animation types

Cons

Has a steeper learning curve compared to some simpler animation libraries
Documentation can be less comprehensive than some more established libraries
Community and ecosystem are smaller compared to more popular animation libraries like GSAP

velocity
17,282

Velocity.js is a fast and lightweight JavaScript animation engine that serves as an alternative to jQuery's $.animate() and CSS transitions.

Code Example

Velocity(element, { opacity: 0.5, width: "50%" }, { duration: 1000 });

Pros

Velocity.js offers better performance than many other animation libraries, especially for complex animations.
It provides a familiar syntax for jQuery users, making it easy to adopt in existing projects.
The library supports both DOM and SVG animations, offering versatility for different use cases.

Cons

Compared to more modern libraries like GSAP, Velocity.js has fewer advanced features and less active development.
It lacks some of the specialized functionalities found in niche libraries like ScrollReveal or Typed.js.
Velocity.js doesn't provide as comprehensive documentation or community support as some larger animation ecosystems.

All Top Projects

anime

49,591

JavaScript animation engine

scrollreveal

22,336

Animate elements as they scroll into view.

GSAP

19,508

GSAP (GreenSock Animation Platform), a JavaScript animation library for the modern web

mojs

18,368

The motion graphics toolbelt for the web

velocity

17,282

Accelerated JavaScript animation.

typed.js

15,379

A JavaScript Typing Animation Library

vivus

15,184

JavaScript library to make drawing animation on SVG

auto-animate

12,462

A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application.

konva

11,345

Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

svg.js

11,038

The lightweight library for manipulating and animating SVG

lax.js

10,404

Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.

nodeppt

10,338

This is probably the best web presentation tool so far!

Visual Copilot
Promo

Turn Figma designs into high-quality code using AI

tween.js

9,804

JavaScript/TypeScript animation engine

react-native-reanimated

8,831

React Native's Animated library reimplemented

two.js

8,288

A renderer agnostic two-dimensional drawing api for the web.

progressbar.js

7,793

Responsive and slick progress bars

dynamics.js

7,572

Javascript library to create physics-based animations

tsparticles

7,523

tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.