Skip to Main Content
Sustainable Web Design Logo
  • Home
  • Guidelines
  • Emissions
  • Ratings
  • Contact

◂ User Experience Design guidelines

2.10 Ensure animation is proportionate and easy to control

User Experience Design

Use animation sparingly and efficiently, only when it supports understanding, while limiting performance impact and giving users control over motion.

Success Criteria

  • Need for animation:
    Use animation only when it supports the user experience or helps users understand content or actions.
  • Avoiding overburdening:
    Limit the number and frequency of animations to reduce distraction, minimize resource use, and maintain expected device performance. Set a maximum number of replays or iterations.
  • Control animation:
    Let users start, pause, stop, or control animated and moving content.
  • Efficient animation:
    Keep interactive and animated content as lightweight as possible. Reduce rendering cost by accounting for formats, lengths, complexity, dimensions, quality, tooling, and implementation approach. Where multiple approaches are available, choose browser- or platform-native animation capabilities and minimize main-thread or layout-intensive work.

View the Guideline

Tags

AccessibilityPerformanceUIUsabilityJavaScriptCSS

Share

More user experience design guidelines

2.1 Identify, assess, disclose, review, and mitigate sustainability impacts

User Experience Design

2.2 Understand user requirements or constraints

User Experience Design

2.3 Integrate sustainability into every stage of the ideation process

User Experience Design

Learn about W3C’s Sustainable Web Interest Group:

A global community advancing sustainability on the web.

Explore the group

This site is brought to you by

Mightybytes Wholegrain Digital
Website Carbon

This page loaded in 0.25 seconds and emitted just 0.5g of CO2

Visit Website Carbon
Ecograder

How green is your website?

Visit Ecograder
© Copyright Sustainable Web Design 2026. Privacy Policy.