Easing as a design decision

Once you know the easing functions available in CSS and JavaScript, the next question is which one to actually reach for. The short answer: for almost anything in a UI, ease-out is the right starting point.

An ease-out curve starts quickly, which makes the UI feel responsive, then slows down toward the end. Among the common preset curves, a Quintic ease-out (easeOutQuint) is particularly aggressive at the start and still settles cleanly. It reads as fast, but not harsh.

Not every project needs that. A gentler ease-out, or even the CSS default ease-out keyword, is fine in most cases. The point is to match the curve to the feel of the product.

When to reach for bounces and springs

Bounce and elastic curves behave differently from the standard ease types, and they carry strong stylistic baggage. They draw attention to the motion. Use them deliberately, not as a default.

For a lighthearted or playful product, a bounce may fit naturally. For a serious or utility-focused interface, the same bounce can pull a user out of the experience. There is no technical reason to avoid them; the decision is about tone.

If you want to experiment, easings.net has a full catalog of curve types with interactive demos.

Setting the right duration

Duration is as important as the curve itself. Too short reads as abrupt; too long makes the UI feel sluggish and can block interaction. The ideal length depends on the easing type:

  • Ease-out and ease-in: 200ms–500ms. Long enough for the eye to register the motion, short enough to stay out of the way. Keep in mind that ease-in will end with an abrupt "jolt" because the velocity peaks at the end; no timing change will remove that effect.
  • Bounce and elastic: 800ms–1200ms. These curves need extra time to settle. Without that margin, the oscillating tail can look jarring.

These are working ranges, not strict rules. Test the motion in context, and adjust according to how it feels in your own project.