Motion Design
Everything you need to know about motion in UX.
We start with why motion exists. Then a mental model, the choice between spring and easing, how long things should take, the 100 ms rule, choreography, space, and accessibility. Read it in order. By the end you will have the rules, the numbers, and the questions to ask before you animate anything. Short on time? Skim the headlines and the pull-outs.
Why motion exists
Nothing in the world holds still. Motion is how we have always read change. Long ago, movement meant predator or prey, so our eyes learned to catch it before we even think. That same wiring fires in a product. If you animate something, the user will notice. Every time.
So every animation spends attention. To spend it well, make sure each one does one of the six jobs below. If it does none of them, it is decoration, and decoration takes without giving anything back.
A button squashing on press confirms the tap landed.
A loading card moving through named states.
A card flip showing the profile on its back.
A dropdown opening out of the button that triggered it.
An error field shaking to catch your eye.
A shared element carrying across two screens.
Before you add any animation, finish this sentence:
“This animation tells the user ___.”
If you can't finish it, cut the animation.
The pen on the table
Picture every animation as a pen sliding across a table toward a spot. Push the pen. Friction slows it down. Put a wall at the end and it bounces back. That is a spring. Three numbers describe every interaction you will ever animate.
How heavy the element feels and how hard it snaps. Buttons are light. Modals are heavy.
How fast the motion loses energy. Too little and it bounces forever. Too much and it drags.
How eagerly the element comes to rest. High stiffness snaps. Low stiffness drifts.
Critical damping is the line between bouncing and not bouncing.
Critical = 2 × √(stiffness × mass).
Pick a share of that based on the element above.
Spring or easing
Did the user touch it directly?
Yes, use a spring. Buttons, drags, toggles, sliders. Anything that reacts to how fast you move. No, use easing. Page changes, loading states, timed transitions. Anything that needs a set duration.
- Button press
- Drag and drop
- Toggle, pull, pinch
- Anything driven by how fast you move
- Page transitions
- Loading states
- Modal in, modal out
- Anything that has to stay in sync
Arriving
Fast start, slow finish. Use it for entrances. Feels like a bowling ball rolling to a stop.
Leaving
Slow start, fast finish. Use it for exits. Feels like a rocket launch. The user asked for it, so commit.
Travelling
Slow, fast, slow. Use it when something moves between two known points. Like a train pulling into a station.
Nothing in nature moves at a constant speed.
So constant speed reads as mechanical and off. Always ease.
Duration that works
Under a hundred milliseconds, the user misses it. Over four hundred, the user is waiting. The band in the middle handles about eighty percent of UI work. Two rules size the rest, and one more sets how entrances relate to exits.
Modal in: ease-out, 350 ms. Slow enough to feel like it arrived.
Modal out: ease-in, 200 ms. Fast enough to feel like it left.
Same element, same easing family. Change the duration, change the feeling.
The 100 ms rule
Flip a light switch and the bulb seems to fire the instant your finger moves. It doesn't. Your brain glues the two events together because the gap is short enough to feel like cause and effect. That is direct manipulation.
Press feedback has to begin within a hundred milliseconds of the tap. It only has to start there; it can finish later. Past that window, the user stops feeling like they are touching the interface and starts feeling like they are waiting on software.
16.67 ms per frame. Stay under that and the eye sees smooth motion. Go over and it sees jank. Animate only transform and opacity. Width, height, top, and left repaint the whole layout every frame.
One main animation at a time. When several things move at once, they cancel each other out. The eye should always know where to look.
Choreography
When more than one element moves at once, the order and timing decide whether it feels deliberate or chaotic. Three patterns cover everything you will build.
Move as one
Use it when the elements really are one thing. A button label and its background. A card and its shadow.
Wait, then go
Each step waits for the one before it to finish. Loading badge, finding profile, ready. The order shows what depends on what.
Offset, overlapping
Elements start a beat apart. Lists, grids, parallel groups. Space them 20 ms to 60 ms apart, top to bottom.
Parent before children.
The container animates first. The content follows inside it.
Always that order.
Exits move together and move faster.
Stagger entrances. Never stagger exits.
A staggered exit looks reluctant to leave.
The spatial model
Every element on screen lives somewhere. Its motion has to match that spot. A modal that slides in from the left and leaves out the top reads as broken, even if the user can't say why. The three axes give you the vocabulary.
Left is back, right is forward
Navigation, onboarding, step flows. Moving right reads as progress. Moving left reads as going back.
Top is navigation, bottom is action
Notifications drop from the top. Sheets and modals rise from the bottom. Action lives where the thumb is.
Front is focused, back is dismissed
Modals come forward and the background dims behind. Z shows hierarchy and where the user should look.
Where does this element live when you can't see it?
Does the animation carry it from that place and back to it?
If either answer is no, fix the direction.
Accessibility is scale
The vestibular system is your inner ear balance system. When the motion your eyes see clashes with what it expects, the brain gets mixed signals. That brings on nausea, dizziness, and headaches. Real symptoms, set off by animation on a screen.
Reduced motion still leaves you plenty. Color transitions, opacity changes, type changes, and icon swaps are all still fair game. What you cut is staggered timing, parallax, big scale transforms, and bouncy springs.
The whole guide in three rules
Entrance ease-out, exit ease-in.
Apply this to every animation you already have. It makes them better on the spot.
Press feedback under 100 ms.
That window is what makes touch feel real. Begin inside it. Finishing can take longer.
Name what the motion says.
If you can't name it, cut it. If you can, make the motion say exactly that and nothing else.
“What would the user lose if I took this out? If nothing, take it out.”
After the session
Thank you for today's session on motion design in UX. I feel like a Figma physicist now.
“Yes! So informative in such a short amount of time. Part two when?”