animejs-v4-ai-guidelines: Instructions file for Claude Code

Anime.js v4 Reference Guide for AI Assistants

🚨 CRITICAL: ALWAYS USE ANIME.JS V4 SYNTAX 🚨

This project uses Anime.js v4.x.x - DO NOT use v3 syntax under any circumstances

If you're about to write import anime from 'animejs' - STOP! That's v3. This project uses v4. Use the correct import below.

🚀 Quick Start - Essential Setup

1. Correct v4 Import (REQUIRED)

// ✅ CORRECT v4 imports
import { animate, createTimeline, stagger, utils, svg, eases, engine } from 'animejs';

// ❌ WRONG v3 import - NEVER USE THIS
// import anime from 'animejs';

2. Configure Time Units to Seconds (SET ONCE IN APP ENTRY POINT)

// ⚠️ IMPORTANT: Set this ONLY ONCE in your app's main entry point
// For React: App.js/App.tsx or index.js/index.tsx
// For Vue: main.js/main.ts
// For vanilla JS: The main script file that loads first

import { engine } from 'animejs';

// Set ONLY in the app's entry point, NOT in components
engine.timeUnit = 's';

// Now ALL durations use seconds everywhere: 1 = 1 second, 0.5 = 500ms
// DO NOT set this in individual components - it's a global setting!

3. Single-Line Format for Simple Animations (REQUIRED)

// ✅ GOOD - Clean, readable, one line for simple tweens
animate('.element', { x: 250, duration: 1, ease: 'outQuad' });

// ❌ BAD - Unnecessary multi-line for simple tweens
animate('.element', {
  x: 250,
  duration: 1,
  ease: 'outQuad'
});

✅ Quick Validation Checklist

Before generating anime.js code, verify:

• Using import { animate, ... } from 'animejs' NOT import anime
• Set engine.timeUnit = 's' ONLY ONCE in app entry point (NOT in components)
• Using seconds for all durations (1 = 1 second)
• Simple animations on ONE LINE
• Using animate() NOT anime()
• Using createTimeline() NOT anime.timeline()
• Using ease: NOT easing:
• Using to: for values, NOT value:
• Using on prefix for callbacks (onUpdate, onComplete)
• Using loop and alternate NOT direction
• Using correct v4 stagger syntax with stagger()
• Using shorthand properties (x, y, z) when possible