Stop 06 · Interaction Design & Micro-interactionsTopics · 3/9

Animation Principles for UI

In short

Disney animators figured out decades ago why some motion feels alive and some feels like a robot. A few of those old rules make your UI transitions feel natural instead of jerky.

Borrowing classic animation principles (easing, timing, anticipation) from traditional animation to make UI motion feel natural rather than mechanical or jarring.

The jaadu runs in to bowl a cricket ball with its arm wound back.

Think of it like this

A fast bowler's run-up

A bowler doesn't teleport to the crease. He starts slow, builds speed, winds his arm back (anticipation), releases, then follows through and slows down. Good UI motion has the same shape: ease in, ease out, never a sudden stop.

Watch it happen

Linear motion vs eased motion

Linear

Same speed from start to end
Stops dead, like hitting a wall
Feels mechanical and cheap

Eased

Speeds up, then gently slows
Settles softly into place
Feels like a real object moving

Use ease-out for things entering the screen and ease-in for things leaving. Save linear for spinners and progress bars.

The big ideas

What you need to know

Easing

Real objects speed up and slow down. Ease-out (fast start, soft stop) suits most UI elements entering view.

Timing

Small UI changes feel right around 150 to 300 ms. Bigger moves across the screen can take a little longer.

Anticipation

A tiny pull-back before a big move tells the eye something is about to happen. Use it sparingly.

Follow-through and stagger

Let list items arrive one after another, a few milliseconds apart. The group reads as connected.

See it in code

Walk through the code

css

1.toast {2  transform: translateY(16px);3  opacity: 0;4  transition:5    transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1),6    opacity 200ms ease-out;7}8 9.toast.is-visible {10  transform: translateY(0);11  opacity: 1;12}

1/3The starting state: pushed down 16px and fully transparent.

A toast that slides up with an ease-out curve. Designers often hand this exact curve and duration to developers.

Save yourself the pain

Common mistakes

Oops

Using the same slow 600 ms animation on every small button state.

Do this instead

Keep small feedback quick. Long animations make people wait for the UI to catch up.

Oops

Leaving everything on linear easing because it's the default.

Do this instead

Pick an ease-out curve for entrances. Note the curve in your handoff so devs match it.

Your mission

Feel the difference

~20 min

Quick check

A modal is appearing on screen. Which easing usually feels best?

Go deeper

1Compare a linear-timed animation to an eased one and note which feels more natural.
2Learn the general guideline: most UI transitions should be 200-400ms, not longer.
3Practice applying an easing curve to a simple transition in Figma's prototyping mode.