Gain insights into creating beautiful, performant animations in Angular. Delve into CSS transitions, Web Animations API, and Angular animations, while exploring performance and debugging techniques.

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

**Route animations** refer to the animations that are applied to view transitions during a route change. Route animations are done by defining a nested animation sequence in the top-level component that hosts the view and the components that host the embedded views.

Route animations can also be applied to nested `router-outlets` in your application---the animation trigger just needs to be applied to the `div` elements that wrap the `router-outlet`.

## How it works

The `router-outlet` (top-level or nested) isn't directly animated using Angular animations. The `router-outlet` is wrapped inside a `div`, which then gets animated.

> **Note:** The `router-outlet` is a directive that tells Angular’s router where in your template to render the view when matched with a route.

An animation trigger is attached to the `div` wrapper, which is bound to a function that returns the `router-outlet`'s current state. This property gets updated every time navigation occurs, which triggers the attached animation.

We can use a helper function, such as `prepareRoute` (**lines 9 and 15**), to do the necessary checks and return the value required by the `routeAnimation` trigger.


# How it works

The `router-outlet` (top-level or nested) isn't directly animated using Angular animations. The `router-outlet` is wrapped inside a `div`, which then gets animated.

> **Note:** The `router-outlet` is a directive that tells Angular’s router where in your template to render the view when matched with a route.

An animation trigger is attached to the `div` wrapper, which is bound to a function that returns the `router-outlet`'s current state. This property gets updated every time navigation occurs, which triggers the attached animation.

We can use a helper function, such as `prepareRoute` (**lines 9 and 15**), to do the necessary checks and return the value required by the `routeAnimation` trigger.


Learn how to define animation sequences to create route transitions as the user navigates from one route to another.

Before We Start

CSS Transitions

CSS Animations

Web Animations API (WAAPI)

Angular Animations

Third-party Animation Libraries

Appendix

Conclusion

Route Animations

How it works