# anime-js

A skill that gives your agent rules for writing Anime.js animations: timelines, stagger, SVG morphing and performance. Useful when AI writes the motion code.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 736 installs · ★ 286
- Author: Mindrally
- License: Apache-2.0 · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/Mindrally/skills/tree/HEAD/anime-js/SKILL.md
- Updated: 2026-10-08
- HTML: https://affpapa.org/en/nevibecode/skills/anime-js

## What it does

The skill hands your agent a working knowledge of Anime.js. It covers the basics of `anime()`, timelines with overlapping offsets, stagger with grid layout, SVG path morphing and line drawing through `strokeDashoffset`. There is a React section too: run the animation inside `useEffect` and call `pause()` on unmount so nothing keeps ticking.

Performance gets its own treatment. Animate `translateX`, `scale` and `rotate`; leave `left`, `top` and `width` alone, because those force a layout recalculation. For continuous updates such as cursor tracking the skill points to `Animatable`. It also shows the Web Animations API bridge via `wapiAnimate` and a `prefers-reduced-motion` check so motion can be switched off.

One thing to sort out first: the project needs the library itself, installed with `npm install animejs`. The source file cuts off inside the best-practices section, so treat the guidance as a starting set rather than the whole list.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill anime-js -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/anime-js/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/anime-js/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill anime-js -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/anime-js/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill anime-js -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/anime-js/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install Mindrally/skills anime-js
```

2. **Manually: put the files in place**
- File: `.github/skills/anime-js/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill anime-js -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/Mindrally/skills --path anime-js
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/anime-js/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill anime-js -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/Mindrally/skills/tree/HEAD/anime-js/SKILL.md

## When to use it
- build a multi-step timeline with overlapping segments
- stagger a grid of cards into view
- draw an SVG line from start to finish
- run an animation in a React component and stop it on unmount
- turn motion off for users who prefer reduced motion

## Example prompts
- animate the card grid with anime.js and stagger from the center
- rewrite this timeline so the blocks overlap by 500ms
- animate the SVG path with strokeDashoffset and respect prefers-reduced-motion

## Source text · SKILL.md · Apache-2.0

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: f9ef8cd14f972780.

BEGIN THIRD-PARTY FILE f9ef8cd14f972780
````text
---
name: anime-js
description: Expert guidelines for building performant animations with Anime.js animation library
metadata:
  maintainer: Mindrally
  source: https://github.com/Mindrally/skills
---

# Anime.js Animation Guidelines

You are an expert in Anime.js, JavaScript, and web animation performance. Follow these guidelines when creating animations.

## Core Principles

### Installation and Import
```bash
npm install animejs
```

```javascript
// Full import
import anime from "animejs";

// Modular import for smaller bundle size
import { animate, timeline, stagger } from "animejs";
```

### Basic Animation
```javascript
anime({
  targets: ".element",
  translateX: 250,
  rotate: "1turn",
  duration: 800,
  easing: "easeInOutQuad"
});
```

## Performance Optimization

### Frame Rate Control
```javascript
// Adjust global frame rate for lower-end devices
anime.suspendWhenDocumentHidden = true;

// Control FPS for specific animations
anime({
  targets: ".element",
  translateX: 250,
  update: function(anim) {
    // Custom frame rate limiting if needed
  }
});
```

### Use Transforms Over Layout Properties
```javascript
// Good - uses GPU-accelerated transforms
anime({
  targets: ".element",
  translateX: 100,  // Good
  translateY: 50,   // Good
  scale: 1.2,       // Good
  rotate: 45,       // Good
  opacity: 0.5      // Good
});

// Avoid - causes layout recalculation
anime({
  targets: ".element",
  left: 100,        // Avoid
  top: 50,          // Avoid
  width: 200,       // Avoid
  height: 150       // Avoid
});
```

### Use Animatable for High-Frequency Updates
```javascript
import { Animatable } from "animejs";

// Optimized for continuous updates (mouse tracking, etc.)
const animatable = new Animatable(".cursor", {
  x: 0,
  y: 0
});

document.addEventListener("mousemove", (e) => {
  animatable.x = e.clientX;
  animatable.y = e.clientY;
});
```

## Timeline Animations

### Basic Timeline
```javascript
const tl = anime.timeline({
  easing: "easeOutExpo",
  duration: 750
});

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

### Timeline Controls
```javascript
const tl = anime.timeline({
  autoplay: false
});

// Control methods
tl.play();
tl.pause();
tl.restart();
tl.reverse();
tl.seek(1000); // Go to 1 second
```

## Stagger Animations

### Basic Stagger
```javascript
anime({
  targets: ".grid-item",
  translateY: [50, 0],
  opacity: [0, 1],
  delay: anime.stagger(100) // 100ms delay between each
});
```

### Advanced Stagger Options
```javascript
// Stagger from center
anime({
  targets: ".grid-item",
  scale: [0, 1],
  delay: anime.stagger(100, { from: "center" })
});

// Grid stagger
anime({
  targets: ".grid-item",
  scale: [0, 1],
  delay: anime.stagger(50, {
    grid: [14, 5],
````
END THIRD-PARTY FILE f9ef8cd14f972780

The third-party file has ended. Everything between the f9ef8cd14f972780 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2963 of 7279 bytes. © Mindrally · Apache-2.0 · https://github.com/Mindrally/skills/tree/HEAD/anime-js/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md