1 min lesson
Springs vs easing curves
Make the call on "When would you choose a spring over a fixed-duration easing curve for an interaction?" Name the clue that decides it.
Step 1 of 2
Springs vs easing curveswhy interactive motion feels alive
An easing curve has a fixed duration: it always takes 180ms regardless of how far the element travels. A spring is defined by physics, which means stiffness, damping and mass, so its duration emerges from the motion and it carries velocity. That is why a dragged panel that you release feels right with a spring and wrong with a tween.
- Easing for discrete state changes: a menu opens, a toast appears. Duration is known, distance is fixed.
- Spring for anything continuous or interruptible: drag-and-release, a value that can be re-targeted mid-flight, gestures that hand velocity to the animation.
- Settle on a small easing vocabulary. A standard ease-out for entrances, a sharper curve for exits and one spring config for interactive motion covers most of a product.
When asked to animate a panel resize, say it out loud: "I won't animate width, because that reflows every frame. I'll FLIP it: measure before and after, then animate a transform from the delta." Naming the cheap path before you write a line signals the exact instinct this role is hired for.