Motion Design

Why some transitions feel right — and the rest feel broken

Tools like Transitions Refine let developers tune UI motion directly inside Cursor or Claude Code, with a timeline and suggestions. But the tuning knobs are universal: easing, duration, and distance. This lab lets you feel each one.

The Easing Laboratory

Drag scene to rotate · Play runs the transition

Duration 300 ms

Travel distance 6 units

Ease-out at 300 ms — the workhorse of UI motion.

The three knobs

Easing — the shape of speed

Easing maps time (0→1) to progress (0→1). Linear moves at constant speed and reads as mechanical. Ease-out starts fast and settles gently — ideal for elements entering, because the UI responds instantly then calms down. Ease-in accelerates away — good for exits. The white curve plotted in the lab is the actual function driving the panel.

Duration — the cost of waiting

Under ~100 ms motion is nearly invisible; over ~500 ms it starts costing the user time. Most interface transitions live between 150 and 350 ms. Drag the duration slider to 1500 ms and feel how a "premium" animation becomes an obstacle.

Distance — motion should match travel

A dropdown moving 8 px and a full-screen sheet moving 800 px should not share a duration. A common rule: longer travel earns modestly longer time, roughly with the square root of distance, not linearly.

Reading an easing curve

On the plotted curve, the horizontal axis is time and the vertical axis is progress. The slope at any point is speed:

Curve	Starts	Ends	Best for
Linear	full speed	full speed	marquees, progress
Ease-out	fast	gentle	entrances, response
Ease-in	gentle	fast	exits, dismissals
Ease-in-out	gentle	gentle	moves within view
Spring	fast	overshoots, settles	playful, physical UI

Why springs overshoot

A spring isn't a time-based curve at all — it's a physics simulation with stiffness and damping. Under-damped springs pass the target and bounce back, which is why the spring option in the lab briefly crosses the finish line. Used sparingly, that overshoot signals playfulness; overused, it signals a toy.

Worked example — fixing a sluggish modal

A modal slides up 400 px with ease-in-out at 600 ms and users describe the app as "heavy." Diagnosis and fix:

/* Before: slow start + long duration = perceived lag */
transition: transform 600ms ease-in-out;

/* After: instant response, gentle landing */
transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
/* ≈ "easeOutExpo" — 80% of travel done in the first 40% of time */

Two changes did the work: ease-in-out → ease-out (the modal now moves the instant you tap, because peak velocity happens at t=0) and 600 → 280 ms. Total interaction time saved: 320 ms per open, and the animation actually feels faster than the numbers suggest because early motion dominates perception. Reproduce it above: set ease-in at 600 ms, play, then switch to ease-out at 280 ms and play again.