The first frame does half the work

A button on this site changes colour in 120 milliseconds. A menu opens in 140. A dialog takes 180.

Those numbers are 20 and 40 milliseconds apart. It is fair to ask whether anybody can feel a difference that small, and I could not have answered. So I counted what a screen actually draws in that time.

Seven pictures

A screen does not show motion. It shows still pictures, one after another, and most screens show sixty of them a second: one every 16.7 milliseconds.

So a move that lasts 120 milliseconds is not a glide. It is seven pictures of a thing on its way and an eighth of it at rest. Whatever that move feels like is decided by where the thing is drawn in those seven pictures, and by nothing else.

Set the figure to Linear at sixty pictures a second. The bars are level: 14% of the way in every frame, a steady walk from one end to the other. Nothing is wrong with it. To my eye it looks like a machine doing it.

The curve decides where they land

Now the curve this site uses. It is one line of CSS, and every menu, switch and dialog here takes it or a close relative of it:

--ease-out: cubic-bezier(0.23, 1, 0.32, 1);

The same seven pictures land somewhere else. The first is already 52% of the way there. The second is at 82%, the third at 93%. The last four share what is left, and what is left is 7%.

An ease out curve is usually described as starting fast and slowing down. That undersells it. Half the move is over before the second picture is drawn.

The curve a browser uses when none is named covers 16% in that first frame. I think that is why an interface nobody tuned can feel a beat behind the hand, even when its timings are short.

Draw one

A curve like that is four numbers: where two handles sit. Figure 2 has the handles. What you draw is sent to three parts of this site: the panel a menu opens as, the segmented control and the switch. They are not pictures of those parts. They are the parts, taking their curve from you.

Drag the first handle along the floor to the right and the curve starts late: the first frames add almost nothing, and the menu seems to think before it opens. Lift it and the first frame takes on more and more of the work. Lift a handle far enough above the box and the curve overshoots: the switch goes past its mark and comes back.

Slow motion shows the shape. Real time shows what it feels like, and that is the one to judge by.

Arriving and settling

Back to 120 and 180. With the site’s curve, a 120 millisecond move is nine tenths done after 43 milliseconds. A 180 millisecond move is nine tenths done after 65.

So where it counts, my quickest timing and my slowest are 22 milliseconds apart: a little over one frame. Both arrive well inside a tenth of a second, which Jakob Nielsen’s old rule of thumb gives as about the limit for a response to feel instantaneous.

What the extra time buys is the tail. The last tenth of the 120 millisecond move takes 77 milliseconds. In the 180 it takes 115. To me that tail is what reads as weight: a dialog settling into place instead of snapping to it.

I have stopped thinking of a duration as how long a thing takes. It arrives almost at once either way. The duration is how long it takes to stop.

That is how I read my three numbers now. A colour has nothing to settle, so it gets the shortest. A menu is small and opens under the pointer. A dialog is the largest thing that moves, so it gets the longest tail. That part is judgement, and yours may differ.

Then there is distance

Half the move in one frame is fine when the move is small. Menus here open from 97% of their size. A menu 232 pixels wide moves its far edge 7 pixels, and at 140 milliseconds the first frame covers 3 of them. Nobody sees a three pixel step. They see a menu that was there the moment they asked for it.

Give the same curve and the same time to something that crosses 240 pixels and the first frame moves it 111. That is not an animation starting. It is a thing leaving one place and turning up in another.

This is why a timing cannot be lifted from a small thing and given to a large one. A long move needs more pictures in its fast part, which means more time, a gentler start, or both. At 400 milliseconds the same 240 pixels begin with a 42 pixel step, and that I can follow.

A faster screen

All of that was counted at sixty pictures a second. A screen that draws 120 gives the same 120 millisecond move fourteen pictures instead of seven, and the first of them covers 29% where it was 52%. Same CSS, same duration, a much finer start.

I cannot choose the reader’s screen. I can choose a move short enough that half of it in one frame still looks like motion.

What I keep from this

• An animation is a handful of pictures. At sixty a second, 120 milliseconds is seven of them.
• The curve decides where in those pictures the move happens. Mine puts half of it in the first.
• With an ease out curve the thing arrives early whatever the duration. The duration sets how long it settles.
• The first step is the curve’s share times the distance. Work it out in pixels before trusting a timing.
• A timing tuned on a small move does not survive a large one.
• Count the frames for the slowest screen you expect, not the one on your desk.

The three numbers in my stylesheet have not changed. What I know about them has.