Ease out, you’re making me wait!

I hate waiting for ease out animations to finish.

When I was a sound designer, it was one of the most annoying things to sync a sound effect on. When a motion ends in an ease out curve, the point at which the animation ends has a speed of zero. This can look really pleasing, but doesn’t actually happen that often in reality. Think about closing a door: when the door closes its speed suddenly changes from moving to still when it hits the door frame. This is where the sound happens. This is the event. This is the thing that happened. Boom.

When there is an ease-out, there is no boom. No event. No done. No “the animation has finished you can start interacting with the machine again.” You just look and go, “Oh, that looks nice.” and then think “Are you done? When can I do…?”

Knowing when an animation is complete is really important because most user interfaces don’t transition to their next state until the animation completes, or don’t respond to any user input at all while the animation is in play, or even worse, send your user input to the wrong place until after the animation completes. Therefore it is CRITICAL for the user to know when the animation has finished. I want the animation. I want my boom.

Now, lets back this up with some Math. Let’s take a graph with the vertical axis being position and the X axis being time. I’m drawing the line downwards so that when the curve hits the X axis, this is the point the animation has completed:

The purple line is a linear function: y = 1-x.

The red line is an ease out line. I’ve taken the curve of a quarter of a sine curve where the line is steepest at the start (maximum speed), and flat at the end (zero speed). The formula I’ve used is “(1 – sin(pi*x/2))^2”. (Adjust the power for the severity of the ease-out.) I don’t know exactly what curves people use for their ease outs, but this demonstrates the issue nicely.

Notice that as the speed slows down, there is a period of time where the animation is still playing, yet the actual movement is very slight. This might look very pleasing, but as I mentioned above, it misses the vital cue of when the animation is finished. In this example, the last 40% of the animations duration corresponds to only 5% of the movement. That combined with the fact that it ends with zero speed, gives no visual indication when the animation has actually finished.

I realise that this is the intention of the ease-out curve. I argue that it’s inappropriate for user interfaces. At least to end with zero speed.

A simple blend between the linear and ease out curves, shown by blue line in the graph above, gives a rate change consistent with the feel of ease-out (start fast, finish slow) but the finish speed IS NOT ZERO. This means there is still a bump. Still a bang. Still a cue. A little boom. This lets the user know that the animation has finished and that they can get on with using their device.

I want to use my device. I’ve got things to do with it. Don’t make me wait for something I cannot see.