Top JavaScript Animation Libraries

Filters

Top 5 Projects Compared

anime
51,090

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

Offers a more intuitive and easier-to-use API compared to some complex libraries like GSAP or Velocity.js.
Provides excellent performance and smooth animations, even for complex sequences.
Has a smaller file size than many alternatives, making it ideal for projects where minimizing load times is crucial.

Cons

Lacks some advanced features found in more comprehensive libraries like GSAP or Mojs.
Has a smaller community and ecosystem compared to more established libraries like GSAP or React Native Reanimated.
May not be the best choice for projects requiring extensive SVG manipulation, where libraries like Vivus or SVG.js might be more suitable.

motion
27,881

motiondivision/motion is a lightweight animation library for React that provides a declarative API for creating smooth animations and gestures.

Code Example

import { motion } from "@motion-division/motion"

<motion.div animate={{ x: 100 }} transition={{ duration: 2 }}>
  Animate me
</motion.div>

Pros

Seamless integration with React components and hooks
Powerful and flexible animation controls with a simple API
Optimized performance with GPU acceleration and efficient rendering

Cons

Limited to React applications, unlike some more versatile libraries
Smaller community and ecosystem compared to more established libraries like GSAP
May have a steeper learning curve for developers new to React or animation concepts

scrollreveal
22,489

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

Simple and intuitive API for creating scroll-based animations
Lightweight and performant compared to more complex animation libraries
Works well with existing HTML structure without requiring additional markup

Cons

Limited to scroll-based animations, unlike more versatile libraries like GSAP or Anime.js
Lacks advanced features for complex animations or timeline control
May not be suitable for projects requiring extensive custom animations beyond scroll-triggered reveals

GSAP
20,497

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

Code Example

gsap.to(".box", {duration: 1, x: 100, y: 100, rotation: 360});
gsap.fromTo(".circle", {opacity: 0}, {duration: 1, opacity: 1, scale: 1.5});

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.
Some advanced features and plugins require a paid license for commercial use.
The library size is larger than some lightweight alternatives, which may impact load times.

mojs
18,604

mo.js is a JavaScript motion graphics library for the web with a declarative API.

Code Example

const burst = new mojs.Burst({
  radius:   { 0: 100 },
  count:    5,
  children: { shape: 'circle', fill: 'red' }
}).play();

Pros

Offers a unique and intuitive declarative API for creating complex animations
Provides excellent performance optimization for smooth animations
Includes a wide range of pre-built shapes and effects for quick implementation

Cons

Has a steeper learning curve compared to some simpler animation libraries
Documentation could be more comprehensive and up-to-date
Less active community and fewer resources compared to more popular libraries like GSAP

All Top Projects

anime

51,090

JavaScript animation engine

motion

27,881

A modern animation library for React and JavaScript

scrollreveal

22,489

Animate elements as they scroll into view.

GSAP

20,497

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

mojs

18,604

The motion graphics toolbelt for the web

velocity

17,296

Accelerated JavaScript animation.

typed.js

15,905

A JavaScript Typing Animation Library

vivus

15,356

JavaScript library to make drawing animation on SVG

auto-animate

13,251

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

12,536

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,346

The lightweight library for manipulating and animating SVG

lax.js

10,488

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

Visual Copilot
Promo

Turn Figma designs into high-quality code using AI

nodeppt

10,373

This is probably the best web presentation tool so far!

tween.js

9,957

JavaScript/TypeScript animation engine

react-native-reanimated

9,471

React Native's Animated library reimplemented

two.js

8,429

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

tsparticles

8,107

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.