Shots in this scene
The Five Jobs of Interface Motion
In one line
Interface motion earns its place by doing one of five jobs: feedback, orientation, attention, cause and effect, or brand. An animation that does none of them is decoration, and decoration costs the user time and attention.
Think of it like this
A car's indicator light blinks to tell other drivers you are about to turn. It has one job, it stops when the job is done, and nobody adds a rainbow animation to it for fun. Interface motion should be as purposeful as that blinker.
Words you'll meet
New words in this topic, in plain English. Come back here whenever one feels fuzzy.
- job (of motion)
- The reason an animation exists: what the user learns or can do because it moves.
- feedback
- Motion that confirms an action registered, such as a button pressing in.
- orientation
- Motion that shows where something came from or went, so people keep their place.
- attention
- Motion that draws the eye to one thing, briefly, such as a dot that pulses twice.
- cause and effect
- Motion that connects an action to its result, such as an item flying into the cart.
- decoration
- Motion with no job. It costs attention and gives nothing back.
Step by step
01Name the job in one sentence
Pick any animation and finish the sentence "this moves so that the user…". "…sees the press worked" is a job. "…thinks it looks premium" is a wish.
02Match the size to the job
Feedback is small and quick (the button dips 6%). Orientation is medium (a panel grows from its button). Brand can be larger, once. The more often the job happens, the smaller the motion.
03Stop it when the job is done
Feedback ends in a fraction of a second. Attention runs twice and stops. Only a loading spinner may run until something else happens, and it stops when the content arrives.
04Write down the calm version
For each job, decide what a person who asked for less motion sees: a fade for orientation, an instant count change for cause and effect. The meaning stays; the movement goes.
Try it yourself
- 1
Step through the press
In "Five jobs on one page", set the timeline to 0.1× and press Reserve. The track reads
WAAPI · transformonbutton#reserveand lasts 140 ms. Pause and step to the middle (70 ms): the button is about 3% smaller (scale 0.97). Step on and it is back to 1 at 140 ms. - 2
Throw three items at once
Press Add lock three times fast. Three dots fly at the same time, and the count stays at 0 until the dots arrive, then reads 3. Each effect follows its own cause, and the timeline shows three
span.flytracks. - 3
Run it as someone who asked for less
Switch on Reduced motion and press all five buttons. The button and headlight fade a little instead of scaling and tilting, the drawer fades in without growing, the dot fades instead of pulsing, and the count goes up at once with no flight. Every job is still done.
Code & diagrams
Press each button. Slow the timeline to 0.1× and press Reserve: one 140 ms track, scale 1 to 0.94 and back. Then switch on Reduced motion and press them all again: the jobs are still done, with fades and instant changes.
Nothing is moving yet. Hover, click or scroll the page: every animation it starts shows up here as a track.
Console
Nothing logged yet.The logo spins forever. The timeline shows one track the moment the page loads, before anyone clicked. Press Save ride while it spins, and see how the toast has to compete with it. Then press Remove the spin. With Reduced motion on, the output says 0 running: decoration is the first thing to drop.
Nothing is moving yet. Hover, click or scroll the page: every animation it starts shows up here as a track.
Console
Nothing logged yet.Expected console output
animations running on load: 1Both add a lock to the cart. Press Add five times in each. Which confirmation would you want on a shop you use every week?
A a banner slides down and back up (1.8 s)
B the button itself turns green and pops (200 ms)
Press Messages in each to restart the badge. Read the sentence below while it pulses. Which one lets you read?
A pulses forever
B pulses twice, then rests
Break it on purpose
Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.
Break #1
Let the effect come before the cause
In "Five jobs on one page", in the Add lock handler, delete bump() from the .then(() => { dot.remove(); bump(); }) and call bump(); on its own line just before document.body.append(dot);. Press Run, then press Add lock once.
Break #2
Forget the calm version of a decoration
In "Motion with no job", delete the whole @media (prefers-reduced-motion: reduce) { … } line. Press Run, switch on Reduced motion under the preview, and read the console.
Myth vs fact
Myth
Brand motion is the most valuable kind.
Fact
It is the least urgent. Feedback and orientation are used on every visit; brand motion is seen once. Spend your motion budget in that order.
Myth
If it does not hurt, it can stay.
Fact
Decoration costs attention and battery even when nobody complains, and it harms some users. It must earn its place with a job.
Pro corner
Extra depth for experienced readers. New to this? Skip it for now and come back later.
- ▸
An infinite animation keeps the browser producing frames for as long as the page is visible, even when nothing else changes. That costs battery on phones (Topic 6.6 shows how to pause off-screen animations). WCAG 2.2.2 also requires a pause control for moving content that starts by itself and lasts over 5 seconds (Topic 7.4).
- ▸
Motion that carries information also needs a non-visual twin. The cart button's
aria-labelalready changes with the count; the toast in Phase 4 sits in arole="status"region so a screen reader announces it (Topic 7.6). - ▸
Feedback is the most frequent job, so it is where tiny costs add up: a 140 ms press animation on a button used 200 times a day is 28 seconds of motion a day. Topic 2.2 does that sum for real.
Remember this
- 1
The problem this solves: teams add motion because it is quick to add (a library offers it, a design tool exports it) and end up with movement nobody can explain. Every animation costs something: attention, battery, load time, and comfort for people who get dizzy. Naming the job of each one lets you keep what works and delete the rest.
- 2
Job 1, feedback. Feedback says "your action registered". A button dips when pressed, a toggle slides, a count bumps. It is the most frequent job, so it must be the quickest and smallest (about 100 to 150 ms). Without it, people press again: Lena's testers pressed Add three times in Phase 0.
- 3
Job 2, orientation. Orientation shows where something came from or went. A cart drawer that slides in from the edge the cart button sits on tells you the drawer belongs to that button, and that it will go back there. On a right-to-left page it comes from the other edge. Without it, panels seem to appear from nowhere and people lose their place.
- 4
Job 3, attention. Attention says "look here, once". A new-message dot pulses twice, then rests. The rule is one thing at a time and always a limited run: an animation that never stops stops being noticed and starts being noise, and it competes with the text people came to read.
- 5
Job 4, cause and effect. This job links two things on screen so you see one led to the other. An item flies to the cart, and the cart count rises when it arrives. The order matters: the effect must come after the cause, never before it.
- 6
Job 5, brand. Brand motion gives a product character: a headlight that winks, a logo that draws itself once. It is a real job, but the least urgent, so it belongs where people came to look (a hero, a loading screen) and never on actions they repeat.
- 7
The delete test. For any animation, ask: if it were removed, would someone lose information or comfort? If not, it is decoration. Val Head's book *Designing Interface Animation* describes interface motion as feedback, orientation, directing attention, showing causality and brand personality. Hectal's five jobs follow that list, with shorter names.
- 8
Jobs survive reduced motion. A person who asks for less motion still needs the feedback, the orientation and the cause and effect. So the job stays and only the movement goes: a fade instead of a flight, a colour flash instead of a bump. Decoration is the only thing you can remove entirely.
Explain it without notes
Name the five jobs of interface motion and give a Lumen example of each.
A designer wants the header logo to rotate forever. How do you respond?
Why must the cart count change after the flying dot arrives, not when the button is pressed?
Practice
List five animations on a site you know. Name the job of each, and say which ones fail the delete test.
Add a sixth button to "Five jobs on one page", "Remove from cart", that reverses the count with cause and effect: a dot flies from the cart to the button, and the count drops on arrival.
Done when you can
You can name the five jobs and give an example of each
You can run the delete test on any animation and say what job it does
You know why an attention animation must end
You can describe the calm version of each job for reduced motion