Top JavaScript Animation Libraries

Filters

Top 5 Projects Compared

anime
50,573

Anime.js is a lightweight JavaScript animation library with a simple yet powerful API for creating smooth animations.

Code Example

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

Pros

Offers a wide range of animation properties and easing functions, providing flexibility for various animation needs.
Has a smaller file size compared to some alternatives like GSAP, making it more lightweight for web projects.
Provides good performance for complex animations, especially when compared to CSS-only solutions.

Cons

Less feature-rich compared to more comprehensive libraries like GSAP, which offers advanced timeline controls and plugins.
Lacks some specialized features found in niche libraries, such as particle systems (tsParticles) or SVG manipulation (Vivus).
Has a smaller community and ecosystem compared to more established libraries like GSAP or Velocity.js, potentially resulting in fewer resources and third-party extensions.

motion
26,442

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

Code Example

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

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

Pros

Specifically designed for React, offering seamless integration with React components
Provides a declarative API, making it easy to create complex animations with minimal code
Supports both keyframe animations and gesture-based interactions out of the box

Cons

Limited to React applications, unlike some other libraries that work with vanilla JavaScript
May have a steeper learning curve for developers not familiar with React's component-based architecture
Less extensive documentation and community support compared to more established libraries like GSAP or Anime.js

scrollreveal
22,433

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 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
20,038

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, rotation: 360});
gsap.timeline()
  .to(".box1", {duration: 1, x: 100})
  .to(".box2", {duration: 1, y: 50});

Pros

GSAP offers unparalleled performance and cross-browser consistency for complex animations.
It provides a rich ecosystem of plugins and tools for advanced animation techniques.
GSAP has extensive documentation, tutorials, and community support.

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 for smaller projects.

mojs
18,552

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

All Top Projects

anime

50,573

JavaScript animation engine

motion

26,442

A modern animation library for React and JavaScript

scrollreveal

22,433

Animate elements as they scroll into view.

GSAP

20,038

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

mojs

18,552

The motion graphics toolbelt for the web

velocity

17,300

Accelerated JavaScript animation.

typed.js

15,682

A JavaScript Typing Animation Library

vivus

15,282

JavaScript library to make drawing animation on SVG

auto-animate

12,964

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

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

The lightweight library for manipulating and animating SVG

lax.js

10,454

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

This is probably the best web presentation tool so far!

tween.js

9,885

JavaScript/TypeScript animation engine

react-native-reanimated

9,177

React Native's Animated library reimplemented

two.js

8,348

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

progressbar.js

7,841

Responsive and slick progress bars

tsparticles

7,818

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.