Disable any animations in Angular by prefers-reduced-motion

Introduction

Animations today are an integral part of modern web applications. Animations help us to improve the perception of our application to the users by giving them feedback about their actions, which helps to make the user experience pleasant and memorable.

But there are cases when we should not use animations:

• Users with restrictions. For them, animation is not an embellishment, but a distracting part that may be less accessible and interfere with the perception

• E2E tests. It takes time to wait for each animation and transition. The more tests there are, the more time is spent waiting for them to be completed

For these 2 cases, you can’t build a separate application without animations, you need to have an opportunity to disable animations.

And there is an easy way to do this.

Prefers-reduced-motion

The prefers-reduced-motion CSS media feature is used to detect if a user has enabled a setting on their device to minimize the amount of non-essential motion. The setting is used to convey to the browser on the device that the user prefers an interface that removes, reduces, or replaces motion-based animations. ( You can find ways to activate it here )

Since this is an @media setting, all code can be handled in the @media block

@media (prefers-reduced-motion) {
  transition: all 0 linear;
  /* others styles */
}

Knowing about this customization, we just need to learn how to handle it properly in the Angular application read more...