Top JavaScript Animation Libraries

Filters

Top 5 Projects Compared

anime
62,014

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 projects 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
29,061

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-canvas/2d";

<motion.div animate={{ x: 100, opacity: 0 }} />

Pros

Seamless integration with React, making it easy to add animations to existing components
Powerful and flexible API that supports complex animations and gestures
Excellent performance optimization, reducing unnecessary re-renders

Cons

Limited to React applications, unlike some other libraries that are framework-agnostic
Smaller community and ecosystem compared to more established animation libraries like GSAP
May have a steeper learning curve for developers new to declarative animation concepts

scrollreveal
22,510

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 some larger animation libraries
Works well with existing HTML structure without requiring extensive markup changes

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 highly customized or interactive animations

GSAP
22,300

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

Code Example

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

Pros

GSAP offers superior performance and smooth animations, even for complex sequences.
It provides a rich 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 some simpler animation libraries.
The full version of GSAP requires a paid license for commercial use.
It may be overkill for simple animations or projects with minimal animation needs.

mojs
18,635

Mo.js is a JavaScript animation library that allows for creating motion graphics with simple and intuitive APIs.

Code Example

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

Pros

Mo.js offers a unique and powerful approach to creating complex animations with simple, declarative code.
It provides excellent performance optimization, making it suitable for creating smooth animations even on mobile devices.
The library includes a wide range of pre-built shapes and effects, reducing development time for common animation tasks.

Cons

Mo.js has a steeper learning curve compared to some other animation libraries due to its unique syntax and concepts.
The documentation and community support for Mo.js are not as extensive as some more popular animation libraries like GSAP or Anime.js.
Mo.js lacks some advanced features found in more comprehensive libraries, such as timeline controls or advanced SVG manipulation.

All Top Projects

anime

62,014

JavaScript animation engine

motion

29,061

A modern animation library for React and JavaScript

scrollreveal

22,510

Animate elements as they scroll into view.

GSAP

22,300

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

mojs

18,635

The motion graphics toolbelt for the web

velocity

17,297

Accelerated JavaScript animation.

typed.js

16,079

A JavaScript Typing Animation Library

vivus

15,382

JavaScript library to make drawing animation on SVG

auto-animate

13,445

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

13,106

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

The lightweight library for manipulating and animating SVG

lax.js

10,504

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

This is probably the best web presentation tool so far!

tween.js

10,024

JavaScript/TypeScript animation engine

react-native-reanimated

9,795

React Native's Animated library reimplemented

two.js

8,499

A renderer agnostic two-dimensional drawing api for the web

tsparticles

8,308

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.