Motion

Guidance

• Navigation transitions should preserve spatial relationships, such as panels sliding from their origin.
• Button interactions should reinforce input -> response: press, feedback, result.
• Feature callouts should animate from the UI element they reference, not arbitrarily appear.
• Avoid motion that competes with primary tasks or distracts from content.

Stress test

• Direction: Is the origin, path, and destination clear?
• Continuity: Does the transition stay coherent between states, even when interrupted?
• Purpose: Does the motion support the task rather than feel purely decorative?
• Attention: Does it guide focus without competing with nearby activity?

Guidance

• Keep durations short and consistent, especially for frequent actions like opening, closing, and switching tabs, which should feel snappy and lightweight.
• Prioritize perceived performance with instant feedback, even when work continues asynchronously.
• Avoid layered or chained animations, and limit most interactions to one meaningful animated change at a time.
• Make motion responsive to interruptions, rapid input, and repeated actions.
• Use motion to clearly communicate system status, including loading, processing, and completed states.

Stress test

• Responsiveness: Does motion respond immediately to input?
• Efficiency: Does animation stay lightweight during repeated use?
• Simplicity: Does motion let users act right away, without adding unnecessary steps, delays, or layers?
• Resilience: Does animation remain responsive during rapid interaction?
• Feedback: Is feedback communicated quickly, even when processing continues asynchronously?

• Consider a spinner animation affordance on anything that may run over 200ms.
• Set a minimum time for loading indicator display times so that animations won't look like a quick confusing flash in case timing runs slightly over 200ms. We recommend 400ms minimum display time.

Don't show a spinner animation if the wait time for the action will be less than 200ms. Any animation under 200ms can be seen as a quick flash and potentially confuse users.

Guidance

• Use expressive motion in onboarding, empty states, and success states.
• Icon and illustration animations can carry more personality than core UI transitions.
• Custom easing curves may be used for icon and onboarding animations when appropriate to the animation's intent and context.
• Loading states can introduce subtle liveliness, but should never feel slow or blocking.
• Avoid overuse so delight doesn’t become distracting or annoying.

Stress test

• Personality: Does motion add character without slowing the interaction?
• Intentionality: Is expressive motion used selectively and purposefully?
• Durability: Will the animation still feel appropriate after repeated exposure?
• Refinement: Does the motion feel fluid and polished rather than attention-seeking?
• Delight: Is delight expressed through subtle timing, easing, or choreography instead of excess movement?

Guidance

• Define a standard set of durations, such as fast, standard, and slow tiers.
• Use consistent easing curves to similar interaction types. Reusable components should share motion curves where possible, while icon and onboarding animations may use custom context-specific motion.
• Similar components should animate the same way across surfaces.
• Establish patterns for enter and exit transitions, state changes, and feedback animations.
• Avoid one-off animations unless they serve a clear, intentional purpose or offer opportunities of delight (e.g., a grid of cards with a bounce animation every time you reload the page would be an unnecessary one-off animation).
• Motion may adapt to platform conventions and input methods while preserving core Firefox behaviors.

Stress test

• Consistency: Does the motion behave consistently across similar Firefox interactions?
• Timing: Are timing and easing aligned with established motion patterns?
• System: Does the animation feel like part of the same motion system?
• Necessity: Is new motion behavior introduced only when necessary?
• Adaptability: Does the motion adapt appropriately across platforms while preserving familiar Firefox behavior?

Guidance

• Avoid large-scale parallax, excessive zooming, sudden spatial shifts, or persistent ambient motion.
• Favor opacity and subtle position changes over dramatic movement.
• Keep motion predictable and tied to user actions.
• Ensure essential information is available without motion.
• Respect reduced motion preferences, but don’t rely on them as the only safeguard.
• Test with a range of sensitivities and real-world scenarios.

Stress test

• Comfort: Does the motion avoid sudden, excessive, or disorienting movement?
• Predictability: Is the animation anchored to a clear user action?
• Focus: Does the motion avoid sustained or competing visual activity?
• Endurance: Does the movement remain comfortable during extended use?
• Adaptability: Does the animation degrade gracefully when reduced motion is enabled?