12-principles-of-animation

Files (1)

• SKILL.md

SKILL.md (first lines)

# 12 Principles of Animation

Review animation code for compliance with Disney's 12 principles adapted for web interfaces.


## Triggers

- animation
- motion
- transition
- keyframe
- spring
- ease
- timing
- squash
- stretch
- anticipation
- animate
- css animation
- framer motion
- gsap

## How It Works

1. Read the specified files (or prompt user for files/pattern)
2. Check against all rules below
3. Output findings in `file:line` format

## Rule Categories

| Priority | Category | Prefix |
|----------|----------|--------|
| 1 | Timing | `timing-` |
| 2 | Easing | `easing-` |
| 3 | Physics | `physics-` |
| 4 | Staging | `staging-` |

## Rules

### Timing Rules

#### `timing-under-300ms`
User-initiated animations must complete within 300ms.

**Fail:**
```css
.button { transition: transform 400ms; }
```

**Pass:**
```css
.button { transition: transform 200ms; }
```

#### `timing-consistent`
Similar elements must use identical timing values.

**Fail:**
```css
.button-primary { transition: 200ms; }
.button-secondary { transition: 150ms; }
```

**Pass:**
```css
.button-primary { transition: 200ms; }
.button-secondary { transition: 200ms; }
```

#### `timing-no-entrance-context-menu`
Context menus should not animate on entrance (exit only).

**Fail:**
```tsx
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} />
```

**Pass:**
```tsx
<motion.div exit={{ opacity: 0 }} />
```

### Easing Rules

#### `easing-entrance-ease-out`
Entrances must use `ease-out` (arrive fast, settle gently).

**Fail:**
```css
.modal-enter { animation-timing-function: ease-in; }
```

**Pass:**
```css
.modal-enter { animation-timing-function: ease-out; }
```

#### `easing-exit-ease-in`
Exits must use `ease-in` (build momentum before departure).

**Fail:**
```css
.modal-exit { animation-timing-function: ease-out; }
```

**Pass:**
```css
.modal-exit { animation-timing-function: ease-in; }
```

#### `easing-no-linear-motion`
Linear easing should only be used for progress indicators, not motion.

**Fail:**
```css
.card { transition: transform 200ms linear; }
```

**Pass:**

From elophanto/EloPhanto, MIT.

More from elophanto/EloPhanto