Anime.js

Language: JavaScript

Animation

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.

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.

Installation

npm: npm install animejs

yarn: yarn add animejs

Usage

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.

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.

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.

Error Handling

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.

Official Docs Github