Easing: where the speed goes

Once you have decided that something should move, the next decision is not how long it moves but where the speed goes. Easing is the curve that distributes motion over time, and Emil Kowalski calls it, in 7 Practical Animation Tips, “the most important part of any animation.” His justification is a demonstration rather than an argument. Two dropdowns open with an identical duration of 300ms. The one on the left uses ease-in, which starts slow; the one on the right uses ease-out, which starts fast. The left one feels slower, and you can inspect the code to confirm nothing else differs. “That’s the difference easing makes.”

The vocabulary is small. Ease-out accelerates at the beginning, and that early speed reads as responsiveness, which is why Emil uses it for anything entering or leaving the screen. In Train Your Judgement he adds the second half of the reason: an entering toast should decelerate into place, because that gentle landing is what makes the transition feel elegant, and the curve also just feels faster because it is sharp at the start. Ease-in does the opposite. It speeds up at the end, and he is direct about it: “this easing is just not made for UI animations.” You could shorten the duration until it works, but you would be fighting the curve. His skill file states it as a rule: never use ease-in for UI animations. Ease-in-out is for the third situation: in Good vs Great Animations he explains that something already on the screen that moves should accelerate and decelerate “just like a car.” Even so, he says you should default to ease-out in most cases.

He later collapsed those judgements into a flowchart so that an agent would not have to guess, and it is a good summary for a human too. Is the element entering or exiting the viewport? Ease-out. If not, is it moving or morphing on screen? Ease-in-out. Is it a hover change? Plain ease, which he treats as an exception that works well for simple things like a background color. Is it constant motion? Linear. Anything else falls back to ease-out. The flowchart appears in both Agents with Taste and his post on building the course, and he describes it as strict on purpose: “It just follows the flowchart and picks the right easing according to my philosophy.”

The second thing Emil insists on is that the built-in CSS keywords are not strong enough. “The built-in easing curves in CSS are usually not strong enough, which is why I almost never use them.” Custom curves, he says, feel more energetic, and he points readers at two sites that publish them, easings.co and easing.dev. Use the explorer below to feel what he means. Start with the ease-out preset, play it, then push the handles so the curve rises much more steeply at the start. The distance and the time do not change; only the distribution does, and that is the whole lesson.

Named curves are useful because they give you a vocabulary to reach for. Easing Graphs (easing.dev), by Alex Vanderzon and Lochie Axon, lists 28 of them with their cubic-bezier values. A handful cover most UI work. Out Quint is cubic-bezier(0.23, 1, 0.32, 1), and it is the exact value Emil ships as --ease-out in his skill file. In Out Quart is cubic-bezier(0.77, 0, 0.175, 1), which is his --ease-in-out token and the curve behind the clip-path reveals in his post on the subject. Snappy Out, cubic-bezier(0.19, 1, 0.22, 1), is identical to Out Expo. Anticipate, cubic-bezier(1, -0.4, 0.35, 0.95), dips below zero before it travels, and Overshoot Out, cubic-bezier(0.175, 0.885, 0.32, 1.275), passes its target and comes back; both are credited to Lochie Axon. For reference, the keyword ease is In Out Base, cubic-bezier(0.25, 0.1, 0.25, 1). One more curve comes from Emil rather than the site: the drawer curve cubic-bezier(0.32, 0.72, 0, 1), which he took from the Ionic Framework because it closely matches iOS, and which his skill file names --ease-drawer.

Emil also keeps a private set. His course ships 18 custom easings “that I use in my own projects,” and the first six are visible on the page about building the course: breeze, silk, swift, nova, crisp, and glide, each a cubic-bezier under a name. The names matter more than the numbers. A curve you have named is a curve you will reuse, and reuse is what makes a product feel cohesive. In Great Animations he gives the clearest example of choosing against his own default: Sonner is a bit slower than usual and uses ease rather than ease-out, because that felt more elegant and matched the toast design, the page design, even the name.

So: pick ease-out unless the element is already on screen, reach for a named custom curve instead of a keyword, and write the choice down as a token so the next transition in your codebase uses the same one. If two transitions at the same duration feel different, the curve is why, and the explorer above is the quickest way to see it.