Anime.js

Overview

Anime.js is a lightweight yet versatile JavaScript animation engine created by Julian Garnier. Renowned for its clean syntax, zero dependencies, and compact bundle footprint, Anime.js simplifies complex web animations by seamlessly driving CSS transforms, SVG paths, DOM attributes, and raw JavaScript numerical values.

Key Features

• ⚡ Lightweight & Modular: High runtime efficiency with a minimal bundle impact, supporting ES module tree-shaking across animations, timelines, and utilities.
• 🎨 Comprehensive Target Support: Effortlessly animates CSS properties, inline styles, DOM attributes, SVG path morphs, and arbitrary object values.
• ⏱️ Flexible Timeline Sequencing: Build synchronized choreographies with staggering delays, directional playback, loops, and precise easing curves.
• 🖋️ Built-in SVG Toolset: Draw vector lines, trace complex motion paths, and morph multi-point polygon shapes with minimal boilerplate.

Installation & Quick Start

npm install animejs

import anime from 'animejs';

// Animate DOM elements with staggered timing and elastic easing
anime({
  targets: '.card-item',
  translateY: [40, 0],
  opacity: [0, 1],
  scale: [0.9, 1],
  delay: anime.stagger(100, { start: 200 }),
  duration: 1200,
  easing: 'easeOutElastic(1, .6)',
  loop: false,
});

Why Choose Anime.js?

• Best Suited For: Interactive micro-interactions, UI element entrance sequences, SVG vector animations, and lightweight interactive widgets where full-heavy enterprise animation runtimes are overkill.
• Ecosystem Fit: Ideal for modern lightweight Jamstack websites, creative interactive landings, and vanilla or framework-based web apps needing an elegant, easy-to-learn animation API.