Easing Guide

Every transition has a curve whether you picked one or not, and the default is the reason a lot of web motion feels slightly off without anyone being able to say why. The shortcut that covers most cases is to ask what the element is doing. Arriving or leaving wants ease-out. Moving across the screen wants ease-in-out. A hover or a color change wants the plain ease.

Ease-out for anything the person just asked for. It moves immediately and settles late.

Same distance, same 150ms. The linear dot starts at its final speed and stops dead, which nothing physical does, so it reads as mechanical. The ease-out dot is most of the way there when the linear one is halfway. It feels faster while finishing at the same moment.

Why not ease-in

Ease-in starts slow, and on anything responding to a click that is the worst thing a curve can do. The first few frames are what tell someone the interface heard them. A slow start reads as lag, and a quick finish does not undo it.

Ease-in has one real use, which is an exit. Something on its way off screen can start slowly and accelerate away, because by the time it is moving quickly you have stopped caring about it. Exits can also run shorter than entrances. You already know what is leaving.

When ease-in-out is right

Ease-out is for things that arrive. Something already on screen that moves to a new position has a start and a stop you can both see, and softening only one end looks unfinished. A tab marker, a drawer sliding between two stops, an icon rotating in place.

How long

About 100 to 150ms for something small, 150 to 250ms for a tooltip or a dropdown, 200 to 300ms for a sheet. Past 300ms a person is waiting on the interface rather than watching it. Bigger things can take longer, because they travel further, not because they are more important.

How often the thing happens overrides all of that. A 200ms transition on a control used a hundred times a day is a tax charged a hundred times, and the right duration for it is none. Duration and frequency are one decision, not two.

What to animate

Transform and opacity are cheap because the compositor can handle them without the browser recalculating layout or repainting. Width, height, top and left are none of those things. If a movement can be expressed as a translate or a scale, express it that way, and the curve you picked will actually be the curve on screen.

Finally, none of this survives a reduced motion setting, and it should not. Wrap anything decorative in a prefers-reduced-motion query and let it arrive instantly. A curve is a nice touch. Being able to use the interface is not.