Your complete guide to Animations in Angular

Control individual children animations from their parent.

Conditionally disable animation for a single component or your entire application.

Custom animations for elements entering and leaving the view.

High level overview of Angular animations, how it works, and how to use them in your project.

Programmatically control your Angular animations.

Apply the same animation to multiple different targets elements using the built in function query.

Animate route changes by adding custom animations to your router outlet.

Control the timing and sequences of your animations using group, sequence, and stagger.

Add multiple steps to your animation using keyframes with Angular animations.

Add custom animations to transitions between different states of an element.

Use predefined animations from Animate.style to animate your application

Create animation timelines using GreenSock

A new animation library, built on the Web Animations API for the smallest filesize and the fastest performance.

Add custom animations to transitions between different states of an element using Popmotion.

Use animation specific features in browsers' devtools to help debug your animation code.

Speed up your unit tests by disabling animation when its not part of your test cases.

Understand the different implications of animating different properties and the different animation methods.

Ways to abstract out common animation code so it can be reused more easily in your application.