Easing vs. Spring
Easing bends time: the animation runs a fixed duration along a speed curve you chose (ease-out, a cubic-bezier). A spring obeys physics instead — stiffness, damping, initial velocity — so it has no set duration, can overshoot and settle, and reacts naturally when interrupted mid-motion.
How to tell them apart
- You set a duration in milliseconds → easing.
- You set stiffness and damping, and duration is whatever physics says → spring.
- It overshoots the target and wobbles into place → spring.
- Drag-and-release motion that should inherit the gesture's speed → spring.
The full entries — names, anatomy, paste-ready prompts
Easing (Timing Function)web
transition-timing-function
The speed curve of an animation — why motion feels smooth or robotic
Spring Animationweb
transition={{ type: "spring", stiffness, damping }}
Physics-based motion that overshoots the target and settles
Still a different pair on your mind? See every commonly confused pair