By the end of this lesson you can
- Explain the purposes motion serves in interfaces.
- Apply duration, easing and choreography principles.
- Design motion that is accessible and respects user preferences.
The idea
Motion in interfaces should have a job. Common purposes:
- Orientation: show where something came from or went (a card expanding into a detail view).
- Feedback: confirm an action (a button press, a toggle).
- Attention: draw the eye to a change (a new message sliding in).
- Continuity: connect states so changes do not feel abrupt.
- Personality: express brand character, used sparingly.
Duration
Small elements move quickly (around 100–200ms); larger elements and full-screen transitions take a little longer (around 200–400ms). Anything slower starts to feel sluggish for frequent actions.
Easing
Real objects accelerate and decelerate. Ease-out (fast start, slow end) suits elements entering the screen. Ease-in suits elements leaving. Ease-in-out suits elements moving from one place to another. Linear motion feels mechanical, except for things like progress bars and spinners.
Choreography
When several things move, stagger them slightly and move them in a consistent direction so the eye can follow.
Accessibility
Large or parallax motion can cause dizziness and nausea for people with vestibular disorders. Respect the "reduce motion" setting by replacing movement with fades or instant changes, and never use flashing content.
Why it matters in real projects
Purposeful motion helps people understand changes and makes products feel responsive and polished. Purposeless motion slows people down, distracts and can make some people physically unwell. Knowing the principles lets you specify motion precisely for developers.
A realistic example
A to-do app deletes tasks instantly, and people often are not sure which task disappeared. The designer adds a 200ms ease-in collapse for the removed row, with the rows below sliding up, plus an "Undo" toast.
With "reduce motion" switched on, the row fades out instead and the list updates instantly. People now notice what changed, accidental deletions are easily undone, and nobody with motion sensitivity is affected.
Step by step
List changes
List state changes on a screen that could use motion.
Assign purpose
Give each motion a purpose, or remove it.
Choose duration
Pick durations based on size and frequency.
Choose easing
Ease-out for entering, ease-in for leaving, ease-in-out for moving.
Choreograph
Stagger and align directions for multiple elements.
Design reduced motion
Define the alternative for each motion.
Common mistakes
Mistake Slow animations on frequent actions.
Instead Keep frequent motion short.
Mistake Linear easing everywhere.
Instead Use easing curves that feel natural.
Mistake Ignoring reduced motion settings.
Instead Provide fade or instant alternatives.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 45 min
Motion spec
Write a motion spec for opening and closing a bottom sheet.
Steps
- Define purpose, duration and easing for open and close.
- Define what happens to the background.
- Define the reduced motion alternative.
- Prototype both versions.
Deliverable
A motion spec table and two prototypes.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
4 items
Summary
- Motion should orient, give feedback, draw attention or connect states.
- Keep durations short and use natural easing.
- Choreograph multiple elements.
- Respect reduced motion preferences.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
Your notes
Marking complete updates your course and roadmap progress.