Anime.js | JavaScript Animation Engine

All-in-one
animation
engine.

A fast and versatile JavaScript
library to animate the web.

npm i animejs

The complete
animator's toolbox

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

timer
easings
draggable
scroll
scope

waapi
timeline
stagger
svg
spring
animation

Intuitive API

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

Enhanced transforms

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

SVG toolset

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

Scroll Observer

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

Advanced staggering

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

Springs and draggable

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

Runs like
clockwork

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

Responsive animations

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

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.

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));
});