animejs

Files (1)

• SKILL.md

SKILL.md (first lines)

<!-- skill: animejs | version: 1.0.0 | updated: 2026-03-17 -->
---
name: animejs
description: |
  Comprehensive skill for Anime.js v4 - a fast and flexible JavaScript animation library. 
  This skill should be used when implementing web animations, creating timelines, working with 
  SVG animations, scroll-based animations, draggable elements, staggered effects, or any 
  JavaScript-based animation on the web. Triggers on: "anime.js", "animejs", "animate elements", 
  "CSS animation with JS", "timeline animation", "stagger animation", "SVG morphing", 
  "motion path", "scroll animation", "draggable", "spring animation", "keyframe animation".
---

# Anime.js v4 Skill

Anime.js is a lightweight JavaScript animation library with a simple yet powerful API. It works with CSS properties, SVG, DOM attributes, and JavaScript Objects.

## Installation

### NPM

```bash
npm install animejs
```

### ES Modules Import

```javascript
import { animate } from 'animejs';
```

### CDN (ES Modules)

```javascript
import { animate } from 'https://esm.sh/animejs';
```

### CDN (UMD)

```html
<script src="https://cdn.jsdelivr.net/npm/animejs/dist/bundles/anime.umd.min.js"></script>
<script>
  const { animate } = anime;
</script>
```

## Core Concepts

Anime.js v4 is modular and tree-shakeable. Import only what you need:

```javascript
// Full import
import { animate, createTimeline, stagger, createDraggable } from 'animejs';

// Standalone modules for smaller bundles
import { animate } from 'animejs/animation';
import { createTimeline } from 'animejs/timeline';
import { createTimer } from 'animejs/timer';
```

## Documentation Sitemap

The complete anime.js v4 documentation structure:

### Getting Started

- Installation (NPM, CDN, Direct download)
- Module imports (ES Modules, CommonJS, UMD)
- Using with vanilla JS
- Using with React

### Timer (`createTimer`)

- **Playback Settings**: delay, duration, loop, loopDelay, alternate, reversed, autoplay, frameRate, playbackRate
- **Callbacks**: onBegin, onComplete, onUpdate, onLoop, onPause, then()
- **Methods**: play(), reverse(), pause(), restart(), alternate(), resume(), complete(), reset(), cancel(), revert(), seek(), stretch()
- **Properties**: currentTime, progress, paused, completed, etc.

### Animation (`animate`)

- **Targets**: CSS Selector, DOM Elements, JavaScript Objects, Array of targets
- **Animatable Properties**: CSS Properties, CSS transforms, CSS Variables, JS Object properties, HTML Attributes, SVG Attributes
- **Tween Value Types**: Numerical, Unit conversion, Relative (+=, -=, *=), Color, Color function, CSS variable, Function based
- **Tween Parameters**: to, from, delay, duration, ease, composition, modifier
- **Keyframes**: Tween values, Tween parameters, Duration based, Percentage based
- **Playback Settings**: delay, duration, loop, loopDelay, alternate, reversed, autoplay, frameRate, playbackRate, playbackEase, persist
- **Callbacks**: onBegin, onComplete, onBeforeUpdate, onUpdate, onRender, onLoop, onPause, then()
- **Methods**: play(), reverse(), pause(), restart(), alternate(), resume(), complete(), cancel(), revert(), reset(), seek(), stretch(), refresh()

### Timeline (`createTimeline`)

- Add timers, Add animations, Sync WAAPI animations, Sync timelines, Call functions
- **Time Position**: Absolute (ms), Relative (<, >, +=, -=), Labels
- **Playback Settings**: defaults, delay, loop, loopDelay, alternate, reversed, autoplay, frameRate, playbackRate, playbackEase
- **Callbacks**: onBegin, onComplete, onBeforeUpdate, onUpdate, onRender, onLoop, onPause, then()
- **Methods**: add(), set(), sync(), label(), remove(), call(), init(), play(), reset(), reverse(), pause(), restart(), alternate(), resume(), complete(), cancel(), revert(), seek(), stretch(), refresh()

### Animatable (`createAnimatable`)

- **Settings**: unit, duration, ease, modifier
- **Methods**: Getters, Setters, revert()

### Draggable (`createDraggable`)

- **Axes Parameters**: x, y, snap, modifier, mapTo
- **Settings**: trigger, container, containerPadding, containerFriction, releaseContainerFriction, releaseMass, releaseStiffness, releaseDamping, velocityMultiplier, minVelocity, maxVelocity, releaseEase, dragSpeed, dragThreshold, scrollThreshold, scrollSpeed, cursor
- **Callbacks**: onGrab, onDrag, onUpdate, onRelease, onSnap, onSettle, onResize, onAfterResize
- **Methods**: disable(), enable(), setX(), setY(), animateInView(), scrollInView(), stop(), reset(), revert(), refresh()

### Layout (`createLayout`) - NEW

- **Usage**: Specifying a root, CSS display animation, Staggered layout, DOM order animation, Enter/Exit layout animation, Swap parent animation, Modal dialog animation
- **Settings**: children, delay, duration, ease, properties
- **States**: enterFrom, leaveTo, swapAt
- **Methods**: record(), animate(), update(), revert()
- Layout id attribute, Callbacks, Properties, Common gotchas

### Scope (`createScope`)

- Add constructor function, Register method function
- **Parameters**: root, defaults, mediaQueries

From RamonsDka/the-architect-overlay, MIT.

More from RamonsDka/the-architect-overlay