neo
76c4c5b4fe
- 74 brands: airbnb, stripe, apple, figma, linear, vercel, etc. - 147 files: DESIGN.md + README.md per brand (~2.1 MB) - Each DESIGN.md contains structured brand analysis (colors, typography, components) - Updated 00-overview.md with new design-systems directory
63 lines
1.5 KiB
Markdown
63 lines
1.5 KiB
Markdown
---
|
|
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`
|