Easing and timing — motion that feels right

Choose your track

Read this module through your lens

The curve is the craft

You can have a perfectly correct Smart Animate transition — matched layers, one property changing — and still have it feel cheap. The remaining variable, the one that separates a prototype that feels expensive from one that feels like a student project, is timing: the easing curve and the duration. Beginners leave both on default and never realize that is where the quality lives.

Easing is the curve of motion over time — how speed changes from start to finish. The default that beginners never change is often linear: constant speed throughout. Nothing in the physical world moves at constant speed; objects have mass, so they accelerate and decelerate. Your eye knows this intimately, so linear motion reads as mechanical and dead, like a robot arm. The instant you give motion a curve that accelerates and settles, it reads as physical and alive. That single change is the biggest upgrade available to a prototype.

Match the curve to the action

Easing is not one setting; different actions want different curves, and matching them is the skill. An element entering the screen should use ease-out: it starts fast and decelerates to a gentle stop, which reads as “arriving and settling.” An element leaving should use ease-in: gentle start, then accelerating away, reading as “departing.” Something moving or morphing from one place to another wants ease-in-out: it eases off, travels, and eases to a stop, like a real object picking up and losing speed.

Get this wrong — the same curve for entering and exiting, or ease-in on something arriving — and the motion feels subtly off even if the viewer cannot say why. Get it right and it feels inevitable.

Duration pairs with easing. UI motion lives in roughly 150 to 300 milliseconds; exits can be a touch faster than entrances. Longer than ~400ms and the user is waiting on your animation, which is the opposite of helpful. The bias, almost always, is toward fast. A snappy ease-out beats a slow dramatic one in a tool people use all day.

Stagger, and resist the springs

One more professional move: when several things animate together — a list loading, a grid of cards appearing — do not move them all in the same instant. That reads as one heavy block shifting. Instead stagger them, offsetting each item’s start by a small delay (20 to 40 milliseconds). The eye then perceives individual elements cascading in, which is both more legible and more pleasing. The same eight rows feel light and intentional staggered, heavy and abrupt simultaneous.

Finally, a warning about the toys. Figma offers springy and bouncy easing, and they are seductive — the first overshoot-and-settle bounce feels delightful. Used everywhere, they become a gimmick that makes a product feel unserious and, worse, slow, because a bounce takes time to settle. Reserve expressive springs for rare, meaningful moments (a successful action, a playful brand). Default to clean ease-out for the everyday motion that makes up 95% of a product. Restraint, again, is the senior signal.

Hands-on exercise

Take a transition you built with Smart Animate and tune its motion. Classify it — entering, exiting, or morphing — and apply the matching easing (ease-out, ease-in, or ease-in-out) at a duration in the 150-300ms band. Then build a list or grid that animates in, and stagger the items by ~30ms each. Compare your tuned version against a linear, 500ms, simultaneous version of the same motion, and capture both. Note in one sentence why the curve and stagger changed the feel.

Second case · a list loading in

The same lesson, a different object

Common failures · spot them fast

The failure gallery

Each of these is caught by a quality gate — keep the cheatsheet open while you work.

Worked example

Watch the journey

Cheatsheet

Reflection