Give Motion a Budget Before You Design It
Deciding the performance constraint first changes what you design, not just what you ship.
Most animated sites are designed first and optimised afterwards, which means the optimisation stage is really a negotiation about which nice things to remove. Setting the budget first avoids that argument entirely.
Our Three Numbers
Sixty frames on a mid-range Android handset that is four years old. Zero animation-library bytes. Every effect disabled under reduced motion. Anything that could not meet all three did not get designed further.
Constraints Produce Better Ideas
The line reveal exists because we could not afford a text-scramble effect. It is calmer, it reads better, and it costs one transform. Several of the patterns we like most came out of the cheapest available option rather than the most ambitious one.
Test on the Bad Device Early
Not at the end. A four-year-old phone on throttled CPU tells you within a day whether a direction is viable. Discovering it at the end means either shipping something that stutters or rebuilding a design you have already signed off.
Budgets Make Review Easy
“Does this hold sixty frames on the test handset” is a question anyone can answer. “Is this too much animation” is a matter of taste and produces a much longer meeting.
