Animation Basics

---
name: animation-basics
description: Animation theory covering the 12 principles of animation and timing guidance. Use when designing motion, choosing easing approaches, or improving animation quality.
---

# 12 Principles of Animation

## 1. Squash and Stretch

Stretch in the area of more movement, squash on collision. Always conserve area — if you stretch one axis, compress the other.

## 2. Anticipation

Build up energy before action, like a spring loading. Can be combined with squash and stretch.

## 3. Staging

- Avoid competing for stage presence — one action at a time draws focus.
- Use the Camera to zoom into interesting areas.
- Insert pauses to let the viewer process information.
- Let text remain on screen long enough to read (up to 3x the time it takes to read aloud).

## 4. Follow Through and Overlapping Action

Drag adds realism. The main body leads; appendages follow with delay. This communicates mass. Use different timing functions for leading vs trailing parts. Skew can sell the effect.

## 5. Slow In and Slow Out

Essential for realism. Objects ease into and out of motion. Exception: collisions — ease only on the outward motion, not at impact. When motion is very fast, no inbetween frames may be needed — perfect for swapping icons or SVGs at the midpoint.

## 6. Arc

Move in arcs instead of straight lines when appropriate, especially when gravity is involved.

## 7. Secondary Action

Supplementary actions that support the main action. Example: a background element pulsing while the foreground element transitions.

## 8. Exaggeration

Not more distorted — more convincing. Quick motions need bigger exaggeration to be noticed at all.

## 9. Solid Drawing

Avoid parallel lines for a more natural, dynamic look. Exception: graphs and data visualizations where parallel structure is intentional.

## 10. Appeal

Keep it simple. Do not add too many details. Clarity and readability beat complexity.

---

# Timing Guidance

Pick easing by the role of the animation:

| Role | Easing | Duration |
|---|---|---|
| Entrance (element appears) | ease-out | 0.3–0.5s |
| Exit (element leaves) | ease-in | 0.2–0.3s |
| In-place change (move, resize, color) | ease-in-out | 0.3–0.8s |
| Emphasis (pulse, pop) | ease-out with overshoot | 0.2–0.3s |
| Stagger between grouped items | — | 40–80ms per word, 100–150ms per element |

- Never pair a fade with nothing: entrances combine opacity with a transform (rise,
  scale, or masked reveal). No entrance should exceed ~0.8s.
- A quick ease-in-out animation lets you swap icons or SVGs at the 50% mark — the fastest point of movement where the change is least noticeable.
- Use arc-based interpolation for movements that should follow a curved path, especially with gravity.