angular.tar.gz

angular

Animations play a crucial role in an application’s user experience (UX). A set of well-designed animations can make an application feel fast, polished, and professional. However, creating animations can be a daunting task that involves knowing what is available and how to choose the right approach for each task.

You will start with the easiest methods and move on to more advanced animation methods as you make your way through this course. You’ll start with general animation techniques, covering CSS transitions, animations, and the Web Animations API, followed by Angular animations and integrating external animation libraries. Lastly, you’ll finish with a deep dive into animation performance and debugging.

This course will provide you with information and advice to help you create beautiful and performant animations in Angular applications. By the end of the course, you will be able to create performant animations and choose the right tools to create them effectively.

Animations in Angular

Sometimes we want to disable an animation when certain conditions are met. For example: when devices are low performing, when browsers are old, or when a user has their system setting set to minimize the amount of nonessential motion (`prefers-reduced-motion` media query). Angular provides us with three ways to disable its animations.

> **Note**: The methods discussed in this lesson only apply to animations created using Angular animations. This wouldn’t affect animations created using other methods such as CSS or Web animation APIs.

Learn three approaches to disable Angular animations in your application, along with their specific use cases and pros and cons.

Before We Start

CSS Transitions

CSS Animations

Web Animations API (WAAPI)

Angular Animations

Third-party Animation Libraries

Appendix

Conclusion

Disable Animations