# animejs

Provides Claude Code with an API reference for Anime.js v4. Useful when creating web animations, SVG morphing, and staggered timelines.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1200 installs · ★ 56
- Author: BowTiedSwan
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/BowTiedSwan/animejs-skills/tree/HEAD/SKILL.md
- Updated: 2026-01-26
- HTML: https://affpapa.org/en/nevibecode/skills/bowtiedswan-animejs

## What it does

This skill supplies your coding assistant with the Anime.js v4 documentation outline. It covers core functions such as `animate`, `createTimeline`, and `createTimer`, alongside playback controls and easing definitions. Assistants can reference options for `onScroll`, text splitting, and spring configurations without guessing argument names.

Keep in mind that the reference targets Anime.js v4 modular imports like `animejs/timeline` and `animejs/animation`. If your codebase still relies on Anime.js v3 syntax, the suggested code will break your imports. The skill also documents newer v4 features, including `createLayout` for DOM transitions and `createDraggable` for drag physics.

Using the resulting scripts requires installing the `animejs` package from npm or importing it from a CDN bundle. The skill acts purely as agent context, keeping function signatures and callback hooks close at hand.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add BowTiedSwan/animejs-skills --skill animejs -a claude-code
```
```bash
npx skills add BowTiedSwan/animejs-skills --skill bowtiedswan-animejs -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add BowTiedSwan/animejs-skills --skill bowtiedswan-animejs -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add BowTiedSwan/animejs-skills --skill bowtiedswan-animejs -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install BowTiedSwan/animejs-skills bowtiedswan-animejs
```

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

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add BowTiedSwan/animejs-skills --skill bowtiedswan-animejs -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/BowTiedSwan/animejs-skills
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add BowTiedSwan/animejs-skills --skill bowtiedswan-animejs -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/BowTiedSwan/animejs-skills/tree/HEAD/SKILL.md

## When to use it
- build multi-step web animations using `createTimeline`
- implement SVG shape morphing with `morphTo`
- link element transforms to page scroll via `onScroll`
- configure drag physics and snapping with `createDraggable`

## Example prompts
- Create an Anime.js v4 timeline to animate cards with staggered delays
- Show an example of morphing two SVG paths using morphTo in Anime.js
- Set up a scroll-linked progress bar animation with onScroll

## Similar
- [anime-js](https://affpapa.org/en/nevibecode/skills/dylantarre-anime-js.md) — skill · 637 installs
- [whiteboard-animation](https://affpapa.org/en/nevibecode/skills/whiteboard-animation.md) — skill · 1400 installs
- [gsap](https://affpapa.org/en/nevibecode/skills/mindrally-gsap.md) — skill · 769 installs
- [motion-advanced](https://affpapa.org/en/nevibecode/skills/motion-advanced.md) — skill · 4600 installs
- [gsap-plugins](https://affpapa.org/en/nevibecode/skills/gsap-plugins.md) — skill · 67200 installs
- [gsap-scrolltrigger](https://affpapa.org/en/nevibecode/skills/freshtechbro-gsap-scrolltrigger.md) — skill · 2800 installs

## Other versions with the same name
- [animejs · freshtechbro](https://affpapa.org/en/nevibecode/skills/animejs.md) — 2800 installs

---
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