Motion With a Job

Animation is the easiest thing in a project to overspend on. It demos well, it photographs well in a case study, and it is almost never the reason a product succeeds. Motion earns its place when it answers a question the user was about to ask.

Every animation should explain a change

Something appeared, something moved, something is loading, something worked. If an animation is not communicating one of those, it is decoration competing for attention with the content. The test is simple: remove it. If nothing gets harder to understand, it was not doing a job.

Origin matters more than easing

A panel that expands from the button that opened it explains the relationship between the two. The same panel fading in from nowhere makes the user rebuild that relationship themselves. Where motion starts carries more meaning than how prettily it travels.

Duration is a legibility decision

Most interface motion should sit in a narrow range. Fast enough that repeat users never wait, slow enough that first-time users see what happened. Long, expressive timings belong in campaign moments where people are watching rather than working.

Consistency beats variety

The same class of change should move the same way everywhere. When each screen invents its own timing and direction, users have to interpret motion afresh each time, which is the opposite of the intent. A small set of documented curves and durations does more for a product than a hundred bespoke transitions.

Respect the people who cannot use it

Reduced-motion preferences are not a niche. Every transition needs a version that conveys the same change without movement, usually a simple state or opacity shift. Building that in from the start costs nothing; retrofitting it costs a sprint.

Performance is part of the design

Motion that stutters reads as broken software regardless of how well it was designed. Animate properties that are cheap to render, keep sequences short, and test on the slowest device in your audience, not the fastest one on your desk.

How we do it at Monaro

We define a small motion system alongside the type and spacing tokens: a handful of durations, two or three curves, and a rule for each kind of change. We prototype in the real build rather than in a video tool, test on mid-range hardware, and ship reduced-motion variants by default. The result is motion that people feel rather than notice.