Easing: why some movement looks alive.

Easing is how something moves between two keys: steadily, speeding up, slowing down or springing past. What each kind does and when to use it, in plain words.

By Suraj Kumar4 November 20265 min read

Two keys say where something starts and where it ends. Easing says how it travels between them. It is the reason one animation looks heavy and natural and another looks like a machine, even when both take the same time.

What easing is.

Picture a ball rolling from one side of a table to the other in one second. With no easing it covers the same distance every frame, starts at full speed and stops dead. Real things rarely move like that: they gather speed, and they slow before they stop.

Easing is a curve that turns the time between two keys into the share of the way covered. Flat parts of the curve are slow, steep parts fast. In KeepSimp's Animation maker each key has its own.

The usual kinds.

Steady moves at one speed, which suits things that never stop, such as a ring that turns all the time. Jump holds still and then changes at once, at the next key.

Speed up starts slowly and leaves fast, for something leaving the screen. Slow down starts fast and arrives gently, for something coming in. Speed up, slow down does both, for something moving from one place to another on screen. Smooth is CSS's ease: it starts gently, speeds up quickly and slows down over a longer stretch.

Overshoot goes a little past the key and comes back, as a logo that pops in. Spring goes past and back several times, getting smaller, as something on a spring.

Your own curve.

Most easing is a cubic Bézier curve with two handles, as CSS defines it with cubic-bezier() and four numbers. Ease-in-out, for example, is 0.42, 0, 0.58, 1. The first and third numbers say when along the time each handle sits, and must stay between 0 and 1; the other two say how far along the way, and may go past 0 or 1, which is how an overshoot is made.

In the Animation maker's graph editor you drag the two handles and watch the movement change. Its curves are CSS's own kind, worked out as browsers work out cubic-bezier().

Choosing one.

Things coming in slow down; things leaving speed up; things that loop for ever move steadily or ease both ways so the loop has no jump. Overshoot and spring add life to something small, such as a button or an icon, and become tiring on something large.

Change the easing before the timing. A movement that feels slow is often a movement that arrives too evenly: try Slow down before you move its keys closer together.

A little less theory. A little more doing.

Try it on your own terms, with a free browser tool.

Try the tool