Motion lessons · #01

Easing: same 0.3 seconds, the difference is how it stops

Published 2026-10-18

The sidebar works, every feature is there, and the client still says "it feels a bit cheap", without anyone being able to say why. Often nothing is wrong with the screen; the problem is the moment it stops. This lesson teaches one thing: the easing curve.

An everyday example first: stopping at a red light

Two cars leave from the same place and reach the stop line in the same 1.7 seconds. Car A drives at one speed and brakes hard at the line, so the whole car jolts forward. Car B brakes more the closer it gets and stops smoothly. Same distance, same time; only how fast each moment is differs. UI motion works the same way.

The test: one sidebar, only the curve changes

We used the Library sidebar of Excalidraw: the same screen, the same distance, the same 0.30 seconds, in two versions.

• A, linear: every frame moves 16 px. It starts and stops instantly, which reads as mechanical.
• B, ease-out: the first frame moves 91 px, each frame after moves less, and the last moves 0 px. Japanese animators call this tsume: the closer to the end, the tighter the in-between frames.

Reading the curve: the slope is the speed

Put time on the horizontal axis and progress on the vertical one. Linear is a straight diagonal: the slope, the speed, never changes. Ease-out starts steep (fast) and flattens out (slowing down), so the last thing the eye sees is the panel settling. B enters on cubic-bezier(.16, 1, .3, 1).

Exits are the reverse: slow, then fast, and shorter

When someone closes the sidebar they have already decided, and their attention has moved on. So the exit uses ease-in: it starts slowly enough for the eye to see it leave, then speeds away, and it is shorter than the entrance. B uses cubic-bezier(.4, 0, 1, 1) for 0.20 seconds. When something is leaving, don’t make people wait.

Rules of thumb

• Things that come in from off screen (sidebars, dialogs, toasts): ease-out, so they slow down and settle.
• Things that leave: ease-in, a little shorter than the entrance.
• Linear only suits motion that never stops, like a spinning loader.

In CSS

.panel {
  transform: translateX(100%);
  /* exit: ease-in, 0.20 s */
  transition: transform 0.20s cubic-bezier(.4, 0, 1, 1);
}
.panel.is-open {
  transform: translateX(0);
  /* enter: ease-out, 0.30 s */
  transition: transform 0.30s cubic-bezier(.16, 1, .3, 1);
}

The transition on .is-open is used when it opens, the one on .panel when it closes, so the entrance and the exit each get their own curve.

An unofficial motion design concept demo. The interface is from excalidraw.com (MIT open source); we have no partnership with Excalidraw. Excalidraw’s sidebar has no slide animation of its own: both A and B are ours. The numbers on screen (16 px, 91 px, 0 px, both curves) are computed by the same functions that drive the animation.

The difference is in the curve. B’s two curves are also LaunchFlim’s own brand curves for entering and leaving.