You are an expert in Anime.js for creating performant, expressive web animations.

## Key Points

- Use `translateX`/`translateY` instead of `left`/`top` for smoother GPU-accelerated transforms.
- Set `autoplay: false` and call `.play()` explicitly when animations should trigger on user interaction or intersection observers.
- Use timeline offsets (`"-=200"`, `"+=100"`) to create overlapping sequences instead of manually computing delays.
- Targeting elements that are not yet in the DOM returns silently with no animation. Ensure elements exist before calling `anime()`.
- Running many simultaneous animations on the same property without `.pause()` on previous ones causes conflicting tweens and jittery motion.

## Quick Example

```bash
npm install animejs
```

```js
import anime from "animejs";
```

Anime.js — Web Animation

You are an expert in Anime.js for creating performant, expressive web animations.

Core Philosophy

Overview

Anime.js is a lightweight (~17KB) animation library that works with CSS properties, SVG attributes, DOM attributes, and plain JavaScript objects. It provides a clean, chainable API with built-in support for timelines, staggering, spring physics, and SVG path animation. Version 4 introduced ES module support and improved performance.

Setup & Configuration

npm install animejs

import anime from "animejs";

CDN usage:

<script src="https://cdn.jsdelivr.net/npm/animejs@4/lib/anime.min.js"></script>

Core Patterns

Basic Property Animation

anime({
  targets: ".box",
  translateX: 250,
  rotate: "1turn",
  duration: 800,
  easing: "easeInOutQuad",
});

Keyframes

anime({
  targets: ".element",
  keyframes: [
    { translateY: -40, duration: 300 },
    { translateX: 200, duration: 500 },
    { translateY: 40, duration: 300 },
  ],
  easing: "easeOutElastic(1, .6)",
});

Staggering

anime({
  targets: ".grid-item",
  scale: [0, 1],
  opacity: [0, 1],
  delay: anime.stagger(100),           // 100ms between each element
  easing: "easeOutExpo",
});

// Grid stagger from center
anime({
  targets: ".grid-item",
  scale: [0, 1],
  delay: anime.stagger(50, { grid: [14, 5], from: "center" }),
});

Timeline Sequencing

const tl = anime.timeline({
  easing: "easeOutExpo",
  duration: 600,
});

tl.add({
  targets: ".header",
  translateY: [-50, 0],
  opacity: [0, 1],
})
.add({
  targets: ".content",
  translateY: [30, 0],
  opacity: [0, 1],
}, "-=300")  // overlap by 300ms
.add({
  targets: ".footer",
  translateY: [20, 0],
  opacity: [0, 1],
}, "-=200");

SVG Path Animation

const path = anime.path(".motion-path svg path");

anime({
  targets: ".circle",
  translateX: path("x"),
  translateY: path("y"),
  rotate: path("angle"),
  duration: 3000,
  loop: true,
  easing: "linear",
});

Animating JavaScript Objects

const progress = { value: 0 };

anime({
  targets: progress,
  value: 100,
  round: 1,
  update: () => {
    document.querySelector(".counter").textContent = progress.value;
  },
  easing: "linear",
  duration: 2000,
});

Playback Controls

const animation = anime({
  targets: ".box",
  translateX: 300,
  autoplay: false,
});

animation.play();
animation.pause();
animation.reverse();
animation.seek(500);    // jump to 500ms
animation.restart();

Best Practices

• Use translateX/translateY instead of left/top for smoother GPU-accelerated transforms.
• Set autoplay: false and call .play() explicitly when animations should trigger on user interaction or intersection observers.
• Use timeline offsets ("-=200", "+=100") to create overlapping sequences instead of manually computing delays.

Common Pitfalls

• Targeting elements that are not yet in the DOM returns silently with no animation. Ensure elements exist before calling anime().
• Running many simultaneous animations on the same property without .pause() on previous ones causes conflicting tweens and jittery motion.

Anti-Patterns

Using the service without understanding its pricing model. Cloud services bill differently — per request, per GB, per seat. Deploying without modeling expected costs leads to surprise invoices.

Hardcoding configuration instead of using environment variables. API keys, endpoints, and feature flags change between environments. Hardcoded values break deployments and leak secrets.

Ignoring the service's rate limits and quotas. Every external API has throughput limits. Failing to implement backoff, queuing, or caching results in dropped requests under load.

Treating the service as always available. External services go down. Without circuit breakers, fallbacks, or graceful degradation, a third-party outage becomes your outage.

Coupling your architecture to a single provider's API. Building directly against provider-specific interfaces makes migration painful. Wrap external services in thin adapter layers.