Back

Motion that explains itself

Good motion answers a question the user didn’t have time to ask: where did that come from, and where did it go?

I try to keep every animation tied to a cause. A panel slides from the button that opened it. A deleted row collapses so the list closes the gap instead of jumping.

A few rules I keep

Keep it short, usually under 300 milliseconds. Ease out when things arrive and ease in when they leave. Respect reduced motion without making the interface feel broken.

If an animation needs a caption to make sense, it’s decoration. Decoration is fine, as long as it never gets in the way.

Next: The case for boring components