https://animejs.com/

anime.js logo v4 Anime.js | JavaScript Animation Engine [4.0.0]

  * Documentation
  * Examples
  * GitHub
  * Sponsor

All-in-one
animation
engine.

A fast and versatile JavaScript
library to animate the web.

npm i animejs

Learn more
Sponsored by

The complete
animator's toolbox

Break free from browser limitations and animate anything on the web
with a single API.

Intuitive API

Animate faster with an easy-to-use, yet powerful animation API.

  * Per property parameters
  * Flexible keyframes system
  * Built-in easings

Enhanced transforms

Smoothly blend individual CSS transform properties with a versatile
composition API.

  * Individual CSS Transforms
  * Function based values
  * Blend composition

SVG toolset

Morph shapes, follow motion paths, and draw lines easily with the
built-in SVG utilities.

  * Shape morphing
  * Line drawing
  * Motion path

Scroll Observer

Synchronise and trigger animations on scroll with the Scroll Observer
API.

  * Multiple synchronisation modes
  * Advanced thresholds
  * Complete set of callbacks

Advanced staggering

Create stunning effects in seconds with the built-in Stagger utility
function.

  * Time staggering
  * Values staggering
  * Timeline positions staggering

Springs and draggable

Drag, snap, flick and throw HTML elements with the fully-featured
Draggable API.

  * Versatile settings
  * Comprehensive callbacks
  * Useful methods

Runs like
clockwork

Orchestrate animation sequences and keep callbacks in sync with the
powerfull Timeline API.

  * Synchronise animations
  * Advanced time positions
  * Playback settings

Responsive animations

Make animations respond to media queries easily with the Scope API.

  * Media queries
  * Custom root element
  * Scopped methods

A lightweight
and modular API

Keep your bundle size small by only importing the parts you need.

Our sponsors

Anime.js is 100% free and is only made possible with the help of our
sponsors.

Start animating

Get started quickly with our in-depth documentation.

  * Getting started
  * Timer
  * Animation
  * Timeline
  * Animatable
  * Draggable
  * Scroll
  * Scope
  * Stagger
  * SVG
  * Utils
  * WAAPI

animate('.square', {
  rotate: 90,
  loop: true,
  ease: 'inOutExpo',
});

animate('.shape', {
  x: random(-100, 100),
  y: random(-100, 100),
  rotate: random(-180, 180),
  duration: random(500, 1000),
  composition: 'blend',
});

animate('.car', {
  ...createMotionPath('.circuit'),
});

animate(createDrawable('.circuit'), {
  draw: '0 1',
});

animate('.circuit-a', {
  d: morphTo('.circuit-b'),
});

animate(createDrawable('path'), {
  draw: ['0 0', '0 1', '1 1'],
  delay: stagger(40),
  ease: 'inOut(3)',
  autoplay: onScroll({ sync: true }),
});

const options = {
  grid: [13, 13],
  from: 'center',
};

createTimeline()
  .add('.dot', {
    scale: stagger([1.1, .75], options),
    ease: 'inOutQuad',
  }, stagger(200, options));

createDraggable('.circle', {
  releaseEase: createSpring({
    stiffness: 120,
    damping: 6,
  })
});

createTimeline()
  .add('.tick', {
    y: '-=6',
    duration: 50,
  }, stagger(10))
  .add('.ticker', {
    rotate: 360,
    duration: 1920,
  }, '<');

createScope({
  mediaQueries: {
    portrait: '(orientation: portrait)',
  }
})
.add(({ matches }) => {
  const isPortrait = matches.portrait;
  createTimeline().add('.circle', {
    y: isPortrait ? 0 : [-50, 50, -50],
    x: isPortrait ? [-50, 50, -50] : 0,
  }, stagger(100));
});

Bundle size

24.50 KB

  * Timer 5.60 KB
  * Animation +5.20 KB
  * Timeline +0.55 KB
  * Animatable +0.40 KB
  * Draggable +6.41 KB
  * Scroll +4.30 KB
  * Scope +0.22 KB
  * Stagger +0.48 KB
  * SVG 0.35 KB
  * Spring 0.52 KB
  * WAAPI 3.50 KB

Stay in the loop

[                    ] [Subscribe]

Thanks for subscribing!
Now check your email to confirm your subscription.

Something went wrong. Please try again later.

Follow us

  * X / Twitter
  * Bluesky

Explore

  * GitHub
  * CodePen

anime.js logo v4 Anime.js | JavaScript Animation Engine
(c) 2025 Julian Garnier