Animejs

Anime.js

Lightweight JavaScript animation library with powerful timeline and stagger capabilities for web animations.

Overview

Anime.js (pronounced "Anime JS") is a versatile animation engine that works with DOM elements, CSS properties, SVG attributes, and JavaScript objects. Unlike React-specific libraries, Anime.js works with vanilla JavaScript and any framework.

When to use this skill:

• Timeline-based animation sequences with precise choreography
• Staggered animations across multiple elements
• SVG path morphing and drawing animations
• Keyframe animations with percentage-based timing
• Framework-agnostic animation (works with React, Vue, vanilla JS)
• Complex easing functions (spring, steps, cubic-bezier)

Core features:

• Timeline sequencing with relative positioning
• Powerful stagger utilities (grid, from center, easing)
• SVG morphing and path animations
• Built-in spring physics easing
• Keyframe support with flexible timing
• Small bundle size (~9KB gzipped)

Core Concepts

Basic Animation

The anime() function creates animations:

import anime from 'animejs'