wow-design-wiki/concepts/animation-physics.md

title, description, tags

title	description	tags
Animation Physics & Easing	Natural-feeling animations that follow physical principles.	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