A journey into Angular Animation

Leverage the AnimationPlayer’s power

In this article will see how to take fully control of the Angular Animation library, through a simple fading animation.

For a detailed view of all the animation functions that angular provide I would recommand this great article of Year Of Moo. In this article we’ll focus on some limits and how to workaround.

Let’s build a simple fading animation on a list of movies :

In this case the animation will apply only on the ul element. Here is how you can apply this animation on each element with delay between each li (stagger) :

Ok, it looks cool. But as a developer I want to be able to reuse my animations. For that I’ll create an AnimationReferenceMetadata and use it for this transition:

Great ! But, now I need to customize the properties of my animation depending on the component I’m on. No problem :

Ok, ok, but I don’t always want to apply this animation on li elements. Why not use a params for that ?

Limitation

Unfortunately, Angular Animation doesn’t support params for query or stagger value :