---
title: Animation Physics & Easing
description: Natural-feeling animations that follow physical principles.
tags: [animation, physics, easing, motion, motion-design]
---

# Animation Physics & Easing

## Easing Curves

### ease-out (default)
```
cubic-bezier(0.25, 0.1, 0.25, 1.0)
```
- Use for: entrances, hovers, reveals
- Feel: snappy, confident

### ease-in-out
```
cubic-bezier(0.4, 0.0, 0.2, 1.0)
```
- Use for: page transitions, modals
- Feel: smooth, balanced

### spring (natural bounce)
```
cubic-bezier(0.34, 1.56, 0.64, 1.0)
```
- Use for: magnetic buttons, pull-to-refresh
- Feel: lively, tactile

## Duration Scale

| Context | Duration | Use Case |
|---------|----------|----------|
| Fast | 150ms | Icon hover, tooltip |
| Normal | 300ms | Button hover, card lift |
| Slow | 500ms | Page transitions, modals |
| Epic | 800ms | Hero section reveals |

## Stagger Timing

```
stagger = 0.06s - 0.12s per element
```
- Grid items: 0.08s
- List items: 0.06s
- Navigation: 0.05s

## Physics Rules

1. **Objects don't start at max speed** — always ease-out
2. **Heavier elements move slower** — scale duration with size
3. **Movement creates momentum** — add overshoot for spring effects
4. **Elements react to each other** — chain animations logically
5. **Silence matters** — pause between animation sequences

## Anti-Patterns
- Never use linear easing (feels robotic)
- Never animate everything at once (stagger!)
- Never exceed 500ms for micro-interactions
- Never ignore `prefers-reduced-motion`