anime.js-best-practiceslisted

# 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 | | ✅ Need hardware acceleration | ❌ Need extensive callbacks (onRender, etc.) | | ✅ CSS color functions | ❌ SVG path morphing | ### WAAPI Import ```javascript // Recommended: from main module import { waapi, stagger, splitText } from 'animejs'; // Or standalone (smallest bundle) import { waapi } from 'animejs/waapi'; ``` ### WAAPI Basic Usage ```javascript // WAAPI - hardware accelerated, lightweight waapi.animate('.element', { translateX: 200, rotate: 180, opacity: [0, 1], duration: 800, ease: 'outExpo' }); ``` ### CRITICAL: CSS vs WAAPI Timing Differences | Property | CSS