Motion Design
A complete field guide to motion in UX.
Why motion exists, then a mental model, then the choice between spring and easing, then duration, then the 100 ms rule, then choreography, then space, then accessibility. Read in order. By the end you have the rules, the numbers, and the questions to ask before adding any animation. Short on time? Skim the headlines and the pull-outs.
Why motion exists
Nothing in this world is static. Motion is how humans have always understood change. In our past, movement meant predator or prey, and our eyes wired themselves to notice it before conscious thought. The same system fires in a product. You cannot animate something without the user noticing.
That means every animation costs attention. The only way to spend attention well is to make sure each animation serves one of six purposes below. If it serves none, it is decoration. Decoration costs without paying back.
A button squashing on press confirms the tap fired.
A loading card progressing through named states.
A card flip revealing the profile on its back.
A dropdown expanding from the button that opened it.
An error field shaking to draw the eye.
A shared element transition between two screens.
Before adding any animation, finish this sentence:
“This animation communicates ___ to the user.”
If you cannot finish it, remove the animation.
The pen on the table
Every animation is a pen sliding across a table toward a target. Push the pen. Friction slows it. Add a wall at the end and it bounces back. That is a spring. Three parameters 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 bleeds energy. Too low it bounces forever. Too high it drags.
How urgently the element returns to rest. High stiffness snaps. Low stiffness drifts.
Critical damping is the line between bouncing and not bouncing.
Critical = 2 × √(stiffness × mass).
Pick a percentage of that based on the element above.
Spring or easing
Did the user directly touch it?
If yes, use a spring. Buttons, drags, toggles, sliders. Anything that responds to velocity. If no, use easing. Page changes, loading states, scheduled transitions. Anything that needs a predictable duration.
- Button press
- Drag and drop
- Toggle, pull, pinch
- Anything driven by velocity
- Page transitions
- Loading states
- Modal in, modal out
- Anything that needs to synchronize
Arriving
Fast start, slow end. Use for entrances. Feels like a bowling ball rolling to a stop.
Leaving
Slow start, fast end. Use for exits. Feels like a rocket launch. The user triggered it, so commit.
Travelling
Slow, fast, slow. Use for elements moving between two known points. A train arriving at a station.
Linear motion does not exist in nature.
Anything moving at a constant speed reads as mechanical and wrong.
Duration that works
Below one hundred milliseconds the user misses it. Above four hundred the user is waiting. The band in the middle covers about eighty percent of UI work. Two rules size the rest. And one rule governs the relationship between entry and exit.
Modal entrance, ease-out, 350 ms. Slow enough to feel like arrival.
Modal exit, ease-in, 200 ms. Fast enough to feel like departure.
Same element, same easing family, different durations, different feeling.
The 100 ms rule
When you flip a light switch the bulb appears to fire at the same moment your finger moves. It does not. The brain stitches the two events together because the gap is short enough to feel causal. That is direct manipulation.
Press feedback must begin within one hundred milliseconds of the tap. Begin, not finish. Past that window the user stops feeling they are touching the interface and starts feeling they are waiting for software.
16.67 ms per frame. Below that the eye sees smooth motion, above it the eye sees jank. Animate only transform and opacity. Width, height, top and left repaint the whole layout each frame.
One primary animation at a time. Multiple things moving at once 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 the result feels intentional or chaotic. Three patterns cover everything you will build.
Move as one
Use when elements are functionally one thing. A button label and its background. A card and its shadow.
Wait, then go
Each step waits for the previous to finish. Loading badge, finding profile, ready. Order communicates dependency.
Offset, overlapping
Elements start at small intervals. Lists, grids, parallel groups. Between 20 ms and 60 ms apart, top to bottom.
Parent before children.
The container animates first. Content follows inside it.
Never the other way.
Exits are simultaneous and faster.
Stagger entrances. Never stagger exits.
Staggered exits feel reluctant to leave.
The spatial model
Every element on screen lives somewhere. Motion must agree with that location. A modal entering from the left and exiting through the top reads as broken even if the user cannot say why. The three axes give you a vocabulary.
Left is back, right is forward
Navigation, onboarding, step flows. Forward motion reads as progress, backward as return.
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, background dims behind. Z communicates hierarchy and what the user should attend to.
Where does this element live when it is not visible?
Does the animation show it coming from and returning to that place?
If either answer is no, fix the direction.
Accessibility is scale
The vestibular system is the inner ear balance system. When visual motion contradicts what it expects, the brain receives conflicting signals. The result is nausea, dizziness and headaches. Real symptoms, triggered by screen animation.
Reduced motion is not the absence of motion. Color transitions, opacity changes, typography changes and icon swaps are all still fair game. What you cut is staggered timing, parallax, large 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 will immediately improve them.
Press feedback under 100 ms.
That window is what makes direct manipulation feel real. Begin within it. Finishing can take longer.
Name what the motion communicates.
If you cannot name it, remove it. If you can, make sure the motion communicates exactly that and nothing else.
“What would the user lose if I removed this? If nothing, remove it.”
After the session
Thank you for today's session on motion design in UX. I feel like a Figma physicist.
“Yes! So informative in such a short amount of time. Part two when?”