Motion Budget
Fixes how many things may move on a screen before any of them are built, because quantity of motion gives away machine-made work faster than any single effect.
When to reach for it
Before adding animation to a screen, and any time a page has acquired a fade-in on every section because each one seemed harmless on its own.
What changes
- Everything that would animate is listed and counted first, which is usually the first time the total has been seen.
- Each candidate is ranked by what its motion tells the user, so decoration competes with feedback instead of being added alongside it.
- A stated budget — one primary movement per screen, at most two supporting — turns each further animation into a trade rather than an addition.
- Motion the user caused is funded before motion the user merely watches, which is where the perceived quality actually comes from.
- The screen is judged on the tenth visit rather than the first, so the flourish that is charming once and tiresome afterwards gets cut before it ships.
Pairs with
- Name Things OnceSettles what everything is called before the code is written, so one idea does not arrive under four names.
- State Machine SketchLists every state a feature can be in before any of them get coded, so the ugly ones are not discovered in production.
- Borrow the ShapeStarts new code from the closest existing file in your repo instead of from a blank page.
Motion Budget
Among the things people name when they say a site looks machine-made, the amount of animation ranks near the top — above rounded corners, above emoji, above every effect that gets mocked on social media. Not a particular animation. The count.
This is the failure mode of easy motion: no single fade-in is a bad decision, so nothing stops the eighth one. A budget stops it, because a budget makes the ninth animation cost the eighth.
1. List what would animate if nothing were cut
Write the whole list before removing anything: page entrance, each section on scroll, hover on every card, the nav on scroll, the modal, the toast, the list stagger, the number count-up, the icon on hover, the button press. Count them.
The count is the finding. Most screens that feel overdone have never had this number written down.
2. Rank each by what it tells the user
Three tiers, and the order is not negotiable:
1. Feedback — it confirms something the user just did. A pressed button, a toggle, a row committing to its new position. 2. Continuity — it explains where something came from or went. A sheet rising from the control that opened it, an item leaving a list so its neighbours close the gap. 3. Decoration — it happens on its own and says nothing. Entrances, scroll reveals, ambient drift, count-ups.
Anything in the third tier is spending budget on the thing that communicates least.
3. Set the budget, then spend it
A workable default: one primary movement per screen, at most two supporting. Feedback on controls does not count against it — sub-150ms state response is not an animation, it is the control working.
Now spend. The primary goes to the transition the screen exists for: the sheet that opens, the row that commits, the result that arrives. Supporting motion goes to whatever would be confusing without it. Everything left is decoration, and it is over budget.
4. Prefer the motion the user caused
Motion in response to input reads as responsiveness. Motion that plays while the user is only reading reads as a screensaver, and it is the second kind that accumulates. When two candidates compete for the last slot, the one attached to a gesture wins.
5. Judge it on the tenth visit
First-visit charm is the wrong test — you are the only person who will ever see this screen for the first time this week. Reload ten times in a row. Anything that makes you wait to get to the content on the tenth reload is a cost the user pays daily for a delight they had once.
Entrances fail this test more than anything else, which is why they are the cheapest cut and the first one to make.
6. Write the budget down next to the screen
Three lines: what the primary is, what the supporting motion is, and what was cut. Without it the next person adds a fade-in because there appears to be room, and the count starts climbing again.
Rules
- Do not stagger a list because a stagger is available. A stagger is for showing that items are separate; on four items that were obviously separate already, it only delays the last one.
- Do not animate on first paint. It delays the content for a viewer who has not asked for anything yet, and it is the single largest contributor to the overdone impression.
- Do not count eight identical section reveals as eight decisions. It is one decision applied eight times, and it should be reconsidered once, as a whole.
- Do not let reduced-motion be the place restraint lives. If the reduced-motion path is the calmer, better screen, that is the screen to ship to everyone.