anime.js v4 Best Practices

A comprehensive guide for implementing animations with anime.js v4 - the lightweight JavaScript animation engine.

Overview

anime.js v4 provides a powerful API for animating CSS properties, SVG attributes, DOM elements, and JavaScript objects. This skill covers best practices, common patterns, and performance optimization for both vanilla JavaScript and React/Next.js applications.

CRITICAL: WAAPI-First Approach

Always prefer waapi.animate() over animate() unless you need JS engine features.

Decision Matrix: WAAPI vs JS Engine

Use `waapi.animate()` when:	Use `animate()` when:
✅ Simple CSS transforms/opacity	❌ Animating 500+ targets
✅ Bundle size matters (3KB vs 10KB)	❌ Animating JS objects, Canvas, WebGL
✅ CPU/network load is high	❌ Complex timeline orchestration

anime.js Best Practices

anime.js v4 Best Practices

Overview

CRITICAL: WAAPI-First Approach

Decision Matrix: WAAPI vs JS Engine