Skip to content
All writing

When to use motion in an interface

Using transitions to explain state changes without delaying the next action.

Motion can explain a change in an interface before a sentence has time to do it. A card moving into a collection makes the destination clear. A panel opening from its trigger helps the relationship between the two remain visible. The difficult part is knowing when that explanation is useful.

Name the change first

Before writing an animation, I write down what changed and what a person needs to understand about it. If the answer is only that the page should feel more lively, I usually leave the content still and spend the time improving the interaction itself.

A useful transition has a beginning and an end that both make sense. I start by building those states without movement. Once they are clear, the transition can describe the relationship between them without becoming responsible for making either one usable.

Let the reader set the pace

I avoid hiding essential text behind scroll timing. A person arriving midway down a page should be able to read it immediately. Reduced motion keeps state changes visible while removing travel and repeated movement; it is another way through the same interface, with the same information available.

My favourite animations are brief enough that I stop noticing them. They answer a small question about what just happened, then let the next action take over. That is a useful standard to return to when a timeline starts becoming the main attraction.