2.17 Take a More Sustainable Approach to Animation

Animation can be both CPU and GPU-intensive and have implications for accessibility. While visually appealing and useful in certain situations, care and attention should be taken when considering the use of a high emissions technology.

Criteria

Need For Animation: Use animation only when it adds value to a visitor’s experience, and not for decorative elements.
Avoid Overburdening: Progressively display an appropriate quantity of animation so as not to overburden the visitor or diminish expected device behavior.
Control Animation: Allow visitors to start, stop, pause, or otherwise control animated content.

Impact

Medium

Effort

Low

Benefits

Environmental:
Animation can be resource intensive. It can utilize both the CPU and GPU, consume a vast amount of RAM, and take a while to render. This is without considering the accessibility and usability issues it contains. By taking all of this into account, allowing the disabling or reduction of animation can be environmentally beneficial.
Social Equity:
Individuals from different nations and backgrounds may have differing views on the use of animation, and different devices may support different levels of technology. As such, catering to many viewpoints will ensure the widest possible audience.
Accessibility:
Animation that flashes can potentially trigger seizure conditions such as epilepsy; therefore it is critically important that you avoid any hazards within your designs.
Performance:
Compressing, removing, or otherwise reducing animation files improves performance as less syntax will exist within your product or service codebase.
Economic:
Subtle animation can draw the visitor’s eye to useful information that could assist you to financial success, but this must be done ethically, and without overdoing it.

GRI

materials: High
energy: High
water: High
emissions: High

Example

Code:

@media (prefers-reduced-motion: reduce) {
	body *,
	body *::before,
	body *::after {
		animation-delay: -1ms !important;
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		background-attachment: initial !important;
		transition-duration: 1ms !important;
		transition-delay: -1ms !important;
		scroll-behavior: auto !important;
	}
}

Prefers-reduced-motion: Sometimes less movement is more.

Resources

View the Guideline