Key insights
- An easing curve maps how a value changes over time. Keep the same distance and duration but swap the curve, and the motion feels completely different — that shape is what your eye actually reads.
- Linear moves at a constant speed. It looks mechanical and cheap, so reserve it for continuous motion like spinners or marquees — never for UI that starts and stops.
- Ease-out starts fast then decelerates into place. It's the safest default for elements entering the screen because it mirrors how real objects settle.
- Spring overshoots slightly then settles, adding a bounce that reads as alive and premium — ideal for button presses, modals, and playful confirmations.
- Apply the same handful of curves everywhere: button press, card cascade, sheet open. Consistent easing is a big part of why an interface feels coherent instead of stitched together.
- Stagger list and card entrances a few frames apart so they cascade in, rather than snapping onto the screen as one rigid block.
Do / Don't
- Do: Default to ease-out for elements entering the screen so they decelerate naturally into place.
- Do: Add a subtle spring overshoot to presses, modals, and confirmations to make the UI feel alive.
- Do: Stagger card and list entrances a few frames apart for a cascade instead of a single hard snap.
- Don't: Reach for linear easing on UI that starts and stops — it reads as mechanical and cheap.
- Don't: Push spring stiffness or bounce so high the element wobbles; a little overshoot sells premium, too much feels broken.
