Skip to content

Anime.js

UI & GraphicsAnimationJavaScript
Official docs ↗GitHub ↗

What it is

Anime.js is a lightweight JavaScript animation library that works with CSS properties, SVG, DOM attributes, and JavaScript objects. It enables creating smooth, powerful, and complex animations with a simple API.

Anime.js provides the `anime()` function to animate properties of HTML, SVG, or JS objects. You can define targets, properties, duration, easing, delay, loops, direction, and callbacks. It also supports timelines for sequencing multiple animations.

Installation

npm install animejs

Getting started

The smallest useful thing you can do with it, and what each part means.

Animate a div's position
import anime from 'animejs/lib/anime.es.js';
anime({
  targets: '.box',
  translateX: 250,
  duration: 1000,
  easing: 'easeInOutQuad'
});
Animates an element with class `box` 250px to the right over 1 second with ease-in-out easing.
Animate multiple properties
anime({
  targets: '.box',
  translateX: 250,
  rotate: '1turn',
  scale: 1.5,
  duration: 2000,
  easing: 'easeInOutSine'
});
Simultaneously animates translation, rotation, and scale of an element.

Advanced usage

Where the library earns its place over a simpler alternative.

Using timeline for sequencing
const tl = anime.timeline({
  easing: 'easeOutExpo',
  duration: 750
});
tl.add({ targets: '.box', translateX: 250 })
  .add({ targets: '.box', rotate: '1turn' })
  .add({ targets: '.box', scale: 1.5 });
Creates a timeline to chain multiple animations in sequence with consistent easing and duration.
Staggered animation
anime({
  targets: '.boxes div',
  translateY: 50,
  delay: anime.stagger(100)
});
Animates multiple elements with a staggered delay between each animation.
Animating SVG properties
anime({
  targets: 'circle',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutSine',
  duration: 1500,
  loop: true
});
Animates an SVG circle's strokeDashoffset to create a drawing effect.
Looping and direction
anime({
  targets: '.box',
  translateX: 250,
  direction: 'alternate',
  loop: true,
  easing: 'easeInOutSine'
});
Animates an element back and forth indefinitely using looping and alternate direction.

Errors and fixes

The failures you are most likely to hit, and what actually resolves them.

Animation not visible
Ensure the target element exists and is not hidden or removed from DOM.
Property not animating
Verify that the property is animatable and correctly spelled.
Timeline not working
Check that each timeline step has a valid target and that the timeline is properly constructed.

Best practices

  • Use timelines to manage complex sequences cleanly.
  • Prefer CSS transforms over top/left for better performance.
  • Use easing functions for natural motion.
  • Stagger animations to add depth and rhythm to UI elements.
  • Use callbacks (`begin`, `update`, `complete`) for custom logic during animations.

Background

Why it exists, and what it was reacting to.

Anime.js was created by Julian Garnier to provide developers a flexible and easy-to-use library for performing animations on the web. It supports timeline-based animations, staggering, easing, and complex sequences, making it a popular choice for interactive UI and motion graphics.

Related libraries

Others in UI & Graphics for JavaScript.

← All JavaScript librariesJavaScript guide