Animation

In digital products, animation highlights to key elements, provides visual feedback for user-triggered interactions, and enhances communication of complex information through walk-throughs. However, for some individuals, these animated movements can cause physical discomfort or distraction.

Moving content may trigger psychological symptoms such as nausea, headaches, or seizures in those who have vestibular disorders. Vestibular disorders can arise from inner ear problems, head trauma, aging, medications, and other neurological diseases.

Moving content can also be distracting for neurodivergent audiences, particularly those with autism, ADHD, or sensory processing sensitivities who may perceive visual stimuli differently. Rapid or repeated motion may be overwhelming, increase cognitive load, or contribute to processing fatigue.

WCAG 2.3.3 Animation from Interactions states that “motion animation, triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.”

Note:

WCAG 2.3.3 Animation from Interactions is a AAA criterion, which is above the standard Esri supports. But, based on customer feedback, Esri has begun introducing some reduced animation features.

Essential animation

Animation may be deemed essential if it’s necessary to teach or demonstrate how a concept works, used to provide feedback on the status of an action initiated by an individual, or indicates progress, such as a page loader.

If you’re unsure whether an animation is essential, ask yourself this question:

• If I removed the animation, would it diminish the understanding, usability, or core functionality of the content?

  • If yes, the animation can be considered essential.

Animation best practices

If including essential animation, be aware of the following:

• Animations should take less than 100 milliseconds—or be greater than 250 milliseconds to avoid breaking the Three Flashes or Below Threshold guideline.

• Prioritize transitions that rely on color shifts and opacity changes.

• Avoid shape transitions that rely on scaling, bouncing, or rotation.

• Avoid horizontal or side-to-side motion.

• Avoid autoplaying videos, looping animations, or full-page parallax effects

Animated symbology

If animated symbology is used, verify the following:

• The animation effect does not occur more than three times per second.

• The duration is no longer than 5 seconds, unless there is a mechanism  for the end user to disable animation. (This may require that looping animations be disabled.)

Reduce motion settings on devices

Most operating systems support the ability for an individual to disable or reduce the frequency of in-app animation. When an individual has this setting enabled, animations will be disabled in 2D map navigation and map component interactions for apps using ArcGIS Maps SDK for Javascript.

Windows

Disable animation in Windows’ Visual effects settings.

Mac OS

Mac OS offers reduced motion, dim flashing lights, automatically pause animated images, non-blinking cursor, and vehicle motion cues. For instructions, review Customize onscreen motion on Mac.

iOS

iOS offers reduced motion, dim flashing lights, automatically pause animated images, automatically paused video previews, disabling message effects, a non-blinking cursor, and vehicle motion cues. For instructions, review:

• Customize onscreen motion on iPhone

• Customize onscreen motion on iPad

Android

Android versions 9 and later provide the option to remove animations from Android.