anime-js

Files (1)

• SKILL.md

SKILL.md (first lines)

# Anime.js Animation Patterns

High-performance animations for web interfaces using Anime.js.

## Core Concepts

| Concept | Description |
|---------|-------------|
| Targets | CSS selectors, DOM elements, or JS objects |
| Properties | CSS, SVG, DOM, or object properties to animate |
| Timeline | Sequence and coordinate multiple animations |
| Staggering | Cascade animations across multiple targets |
| Easing | Control animation timing curves |

## Basic Animation

```typescript
import anime from 'animejs'

// Simple animation
anime({
  targets: '.element',
  translateX: 250,
  opacity: [0, 1],
  duration: 1000,
  easing: 'easeOutExpo'
})
```

## CSS Properties

```typescript
anime({
  targets: '.box',
  translateX: 250,
  translateY: 50,
  rotate: '1turn',
  scale: 1.5,
  opacity: 0.5,
  backgroundColor: '#FFF',
  borderRadius: ['0%', '50%'],
  duration: 2000
})
```

## SVG Animations

```typescript
// Line drawing
anime({
  targets: 'path',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutSine',
  duration: 1500,
  delay: (el, i) => i * 250
})

// Morph path
anime({
  targets: 'path',
  d: [
    { value: 'M0 0 L100 0 L100 100 L0 100 Z' },
    { value: 'M50 0 L100 50 L50 100 L0 50 Z' }
  ],
  easing: 'easeInOutQuad',
  duration: 2000
})
```

## Timeline

```typescript
const tl = anime.timeline({
  easing: 'easeOutExpo',
  duration: 750
})

tl
  .add({ targets: '.header', translateY: [-100, 0], opacity: [0, 1] })
  .add({ targets: '.content', translateX: [-100, 0], opacity: [0, 1] }, '-=500')
  .add({ targets: '.footer', translateY: [100, 0], opacity: [0, 1] }, '-=500')
```

## Staggering

```typescript
// Basic stagger
anime({
  targets: '.grid-item',
  translateY: [100, 0],
  opacity: [0, 1],
  delay: anime.stagger(100)
})

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

// Stagger with easing
anime({
  targets: '.item',
  translateX: 350,
  delay: anime.stagger(100, { easing: 'easeOutQuad' })
})
```

## Easing Functions

| Category | Functions |
|----------|-----------|
| Built-in | `linear`, `easeInQuad`, `easeOutExpo`, etc. |
| Spring | `spring(mass, stiffness, damping, velocity)` |
| Steps | `steps(5)` |
| Custom | `cubicBezier(0.5, 0, 0.5, 1)` |

```typescript

From 5DLabsInc/cto, AGPL-3.0.

More from 5DLabsInc/cto