Motion
Easing
motionanimationtimingcurvephysics
The acceleration curve of an animation — controlling whether it starts fast, ends slow, or bounces.
When to use
- Always — linear motion reads as mechanical and robotic
- ease-out for elements entering the screen (starts fast, decelerates)
- ease-in for elements leaving (accelerates into the exit)
- spring physics for tactile, playful interactions
Examples
- cubic-bezier(0.4, 0, 0.2, 1) — Material Design standard easing
- Spring stiffness 300, damping 30 in Framer Motion
See this in the wild
Analyze a site and look for easing in the breakdown.
