Motion Part 2
An interface's feel can be influenced by animations. When executed correctly, they provide rhythm and feedback. However, if overused or poorly timed, they can make the experience feel less responsive.
Here are a few notes on animation timing and restraint, especially in the context of designing for interfaces we use every day.
General Guidelines
Most UI animations should live between 150–300ms. This range feels quick, yet readable from a cognitive standpoint. It gives the eye just enough time to register change, without making the interface feel slow.
- 150ms for hover transitions—our focus is already on the element.
- 200ms enter / 150ms exit for popovers and modals—paired with an
ease-outorease-in-outcurve for natural responsiveness.- Tip: default to using custom easing curves if the built-in curve is not strong enough.
- Evaluate anything else on a case-by-case basis, depending on spatial distance, frequency of use, and emotional tone
- For instance, a gentle fade-in for a success notification can evoke calmness, while a quick bounce can suggest energy or urgency.
As a baseline, transitions should serve the user’s mental model. They shouldn’t just move pixels—they should clarify what changed and why.
When Not to Animate
Animations are not always helpful. There are cases where motion gets in the way—especially with high-frequency UI patterns.
For example, macOS menus and tools like Raycast avoid entrance animations for things like context menus or launchers. These are tools you call upon dozens of times a day. Any added delay, even 100ms, can accumulate into friction. Perceived performance feels faster.
In these contexts:
- Skip entrance animations. Fade out if needed, but keep presentation instant.
- Avoid transitions between submenu items (e.g., hover states or delayed fades).
- Function over flourish. Motion should never block comprehension or speed.
As a rule of thumb: if a component appears more than a few times a day, then default to no animation. If it’s a novel moment (like a login flow or onboarding), consider using motion to enhance perception and delight.
Always be mindful of users who prefer reduced motion and respect the system preference. Provide a thoughtful default by using the prefers-reduced-motion media query on the web or equivalent iOS/Android APIs.
Taste and Restraint
Animation is a tool for storytelling but it requires taste—knowing when to hold back. I find that interfaces that feel “alive” usually reflect careful choices—balancing responsiveness with restraint.
Approach motion design like editing a film: just as every cut and transition in a film supports the narrative and guides the viewer’s attention, every bit of motion in an interface should support the user’s journey and serve the story.