| 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
- Prefer ease-in-out-cubic curves for most animations — natural acceleration and deceleration.
- 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.
