animejs

Files (3)

• SKILL.md
• api-reference.md · references/
• examples.md · references/

SKILL.md (first lines)

# Anime.js v4 Animation Skill

Anime.js v4 is a modular JavaScript animation engine (10KB full / 3KB WAAPI-only). This skill ensures you write correct v4 syntax — the API changed significantly from v3.

## Installation

```bash
npm install animejs
```

CDN (ESM):
```html
<script type="module">
  import { animate } from 'https://cdn.jsdelivr.net/npm/animejs/+esm';
</script>
```

## Core Concept: Named Imports

v4 uses named exports, not a default `anime` object. Import only what you need:

```js
import { animate, stagger, createTimeline, utils } from 'animejs';
```

Subpath imports for smaller bundles:
```js
import { animate } from 'animejs/animation';
import { createTimeline } from 'animejs/timeline';
import { createDraggable } from 'animejs/draggable';
import { onScroll } from 'animejs/events';
import { stagger, utils } from 'animejs/utils';
import { waapi } from 'animejs/waapi';
```

## Quick Reference: `animate()`

```js
animate(targets, parameters);
```

**Targets**: CSS selectors, DOM elements, NodeLists, JS objects, or arrays of these.

**Parameters** combine animatable properties + playback settings + callbacks:

```js
animate('.box', {
  translateX: 250,           // CSS transform
  opacity: [0, 1],           // [from, to]
  scale: { from: 0.5, to: 1 },
  backgroundColor: '#FF0000', // color animation
  duration: 800,
  delay: stagger(100),       // stagger per element
  ease: 'outExpo',           // easing function
  loop: 2,                   // repeat 2 times (3 total plays)
  alternate: true,           // ping-pong
  onComplete: () => console.log('done'),
});
```

### Animatable Properties

| Category | Examples |
|----------|---------|
| CSS | `opacity`, `width`, `height`, `backgroundColor`, `borderRadius` |
| Transforms | `translateX`, `translateY`, `rotate`, `scale`, `skewX` |
| CSS Variables | `'--my-var': 100` |
| SVG Attributes | `cx`, `r`, `points`, `d` (via morphTo) |
| HTML Attributes | `value`, `data-count` |
| JS Object Props | Any numeric property on a plain object |

### Value Formats

```js
translateX: 250,              // unitless (px for transforms)
translateX: '10rem',          // with unit
translateX: '+=100',          // relative (add 100)
translateX: '-=50px',         // relative subtract
opacity: [0, 1],             // [from, to] shorthand
scale: { from: 0.5, to: 1.5 },  // explicit from/to
rotate: '1turn',             // CSS units work
```

### Function-Based Values

```js
animate('.item', {
  translateX: (el, i, total) => i * 50, // per-element
  delay: (el, i) => i * 100,
});
```

### Keyframes (Per-Property)

```js
animate('.ball', {
  y: [
    { to: '-2.75rem', ease: 'outExpo', duration: 600 },
    { to: 0, ease: 'outBounce', duration: 800, delay: 100 },
  ],
});
```

## Playback Settings

| Setting | Default | Description |
|---------|---------|-------------|
| `duration` | 1000 | ms |
| `delay` | 0 | ms before start |
| `loop` | 0 | repetitions (0 = play once, `true` = infinite) |
| `loopDelay` | 0 | ms between loops |
| `alternate` | false | reverse on each loop |
| `reversed` | false | play backward |
| `autoplay` | true | start immediately |
| `playbackRate` | 1 | speed multiplier |
| `frameRate` | null | cap FPS |

## Callbacks

From delexw/claude-code-misc, MIT.

More from delexw/claude-code-misc