Motion

Motion and animation can add delight and lead to wonderful experiences.

Specific Guidance

Loading indicators

Usage

Motion design guidelines by the UX team

Motion design principles published by Amy and Eric from the UX team in 2018. These timely principles are still relevant and applicable to motion UI work.

Excerpt from the article:

Quick: Animations should be fast and nimble and never keep the user waiting longer than they need to. The aim is to prioritize user perceived performance over technical benchmarks.

Informative: Motion should help ease the user through the experience. It should aid the flow of actions, giving clear guidance for user orientation: spatial or temporal.

Whimsical: Even though most people would not associate whimsy with a browser, we wanted to incorporate some playful elements as part of Firefox’s personality (and maybe ourselves).

Firefox has a motion team?! Yes we do! – Firefox UX

Motion may sometimes feel like an afterthought or worse yet “polish”. For the release of Firefox Quantum (one of our most significant releases to date), we wanted to ensure that ...

Accessibility

WCAG success criterion for different animation criteria (from W3C.org):

Guideline 2.2 Enough Time

Provide users enough time to read and use content.

SC 2.2.2 Pause, stop, hide Learn more

For moving, blinking, scrolling, or auto-updating information, all of the following are true:

Moving, blinking, scrolling

For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential; and

Auto-updating

For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.

Guideline 2.3 Seizures and Physical Reactions

Do not design content in a way that is known to cause seizures or physical reactions.

SC 2.3.1 Three Flashes or Below Threshold Learn more

Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds.

SC 2.3.3 Animation from interactions Learn more

Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.

prefers-reduced-motion

Animated content can cause motion sickness and also be distracting. Users should be able to minimize animations. prefers-reduced-motion is a CSS media feature that can detect if a user has “reduced motion” settings enabled on their device so that developers can provide them an alternative CSS animation with reduced down motion. See Guideline 2.3 Seizures and Physical Reactions to learn more.

In Firefox, this setting is honored if (from MDN):

In GTK/GNOME: Settings > Accessibility > Seeing > Reduced animation is turned on.

In older versions of GNOME, GNOME Tweaks > General tab (or Appearance, depending on version) > Animations is turned off.

Alternatively, add gtk-enable-animations = false to the [Settings] block of the GTK 3 configuration file.

In Plasma/KDE: System Settings > Workspace Behavior -> General Behavior > "Animation speed" is set all the way to right to "Instant".

In Windows 10: Settings > Ease of Access > Display > Show animations in Windows.

In Windows 11: Settings > Accessibility > Visual Effects > Animation Effects

In macOS: System Preferences > Accessibility > Display > Reduce motion.

In iOS: Settings > Accessibility > Motion.

In Android 9+: Settings > Accessibility > Remove animations.

In Firefox about:config: Add a number preference called ui.prefersReducedMotion and set its value to either 0 for full animation or to 1 to indicate a preference for reduced motion. Changes to this preference take effect immediately.

Tools

Photosensitive Epilepsy Analysis Tool (PEAT)

A tool that helps to measure the effect of an animation on users with photosensitive epilepsy - PEAT. The Trace Center’s Photosensitive Epilepsy Analysis Tool (PEAT) is a free, downloadable resource for developers to identify seizure risks in their web content and software. It is especially helpful for borderline cases where an animation is larger/faster.

Acknowledgements

Many thanks to the designers and developers who have shared the information we’ve collected in these motion guidelines today: Amy Lee, Eric Pang, and Anna Yeddi.