In this article, we will understand why reduced motion support is needed. We will also understand the media query and its various usages. And at last, we will see how to disable animations in Angular.

If you’re simply interested in the main code, head over to  Disable Animations. There we’re going to create a service, which will help us identify user’s preferences for reduced motion. Or take a look at the code directly.

Animation

Animations can be used in all kinds of web pages. Oftentimes they’re used to provide feedback to the user to indicate that an action is received and being processed. It can be a small animation that happens when a user scrolls or a bouncy animation to showcase a new product. We generally see a slide-from-top animation for banners and announcements on most of the web pages.

But not everyone likes animations and there are folks with seasickness or vestibular motion disorder. Disabling or reducing animations is an important Accessibility feature. Fortunately, CSS media query prefers-reduced-motion helps developers to serve the users who fall in that category.

prefers-reduced-motion

The prefers-reduced-motion media query detects whether the user has requested the operating system to minimize the amount of animation or motion it uses.

It can take two values:

no-preference — Indicates that the user has made no preference known to the system. This keyword value evaluates as false in the boolean context.

reduce — Indicates that user has notified the system that they prefer an interface that minimizes the amount of movement or animation, preferably to the point where all non-essential movement is removed.

This media query is still in draft of Media Queries Level 5 , but the majority of latest browsers support it today.

#programming #angular #javascript #animation