Top JavaScript Animation Libraries

Filters

Top 5 Projects Compared

anime
64,787

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
Limited built-in support for complex SVG animations compared to specialized libraries like Vivus
Smaller community and ecosystem compared to some more established animation libraries

motion
29,964

Motion is a production-ready animation library for React that aims to provide a simple and declarative API for creating animations.

Code Example

import { motion } from "framer-motion"

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

Pros

Seamless integration with React, making it easy to add animations to existing components
Powerful and flexible API that allows for complex animations and transitions
Built-in support for gestures and drag interactions

Cons

Limited to React applications, unlike some other libraries that are framework-agnostic
May have a steeper learning curve compared to simpler animation libraries
Performance might be slightly lower than lower-level animation libraries in some cases

GSAP
23,022

GSAP (GreenSock Animation Platform) is a robust JavaScript animation library known for its high performance and flexibility in creating complex animations for web and mobile applications.

Code Example

gsap.to(".box", {duration: 1, x: 100, y: 50, rotation: 360});
gsap.timeline()
  .to(".circle", {duration: 1, scale: 1.5})
  .to(".square", {duration: 0.5, opacity: 0}, "-=0.5");

Pros

GSAP offers superior performance, especially for complex animations, compared to most other libraries.
It provides a wide range of features and plugins, making it versatile for various animation needs.
GSAP has excellent browser compatibility and works well with different frameworks.

Cons

GSAP has a steeper learning curve compared to simpler libraries like anime.js or Velocity.js.
The full version of GSAP requires a paid license for commercial use, unlike many open-source alternatives.
It may be overkill for simple animations, where lighter libraries might suffice.

scrollreveal
22,536

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
Simple API that allows for quick implementation of complex scroll animations

Cons

Limited to scroll-based animations, lacking the versatility of general-purpose animation libraries like GSAP or Anime.js
Fewer advanced features compared to more comprehensive animation libraries
May require additional libraries for more complex animations or non-scroll-based effects

mojs
18,652

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 approach to creating complex animations with simple, chainable methods
Provides excellent performance optimization for smooth animations, even with numerous elements
Includes a variety of pre-built shapes and effects, reducing development time

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

64,787

JavaScript animation engine

motion

29,964

A modern animation library for React and JavaScript

GSAP

23,022

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

scrollreveal

22,536

Animate elements as they scroll into view.

mojs

18,652

The motion graphics toolbelt for the web

velocity

17,286

Accelerated JavaScript animation.

typed.js

16,148

A JavaScript Typing Animation Library

vivus

15,425

JavaScript library to make drawing animation on SVG

auto-animate

13,570

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

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

The lightweight library for manipulating and animating SVG

lax.js

10,511

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

This is probably the best web presentation tool so far!

react-native-reanimated

10,320

React Native's Animated library reimplemented

tween.js

10,068

JavaScript/TypeScript animation engine

two.js

8,532

A renderer agnostic two-dimensional drawing api for the web

tsparticles

8,510

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.