Angular Animations: Learn the basics

When you build stuff in Angular, you probably pretty quickly discover that you want to add animations and transitions. They are an important aspect to any application now-a-days right? They help make the overall user experience feel nicer and can help to make it more intuitive too. Many times, we can use CSS to handle these animations, but Angular has a powerful animation framework baked right in that allows us to do a lot more than what we can with plain ol' CSS.

In this video I'm going to show you the basics of getting started with Angular animations, how to create a basic state-based transition, and how to trigger it on an element when an interaction occurs. Alright, let's get to it.

------------------------------------------------------------------------------

------------------------------------------------------------------------------

------------------------------------------------------------------------------

🔗 Demo Link:

------------------------------------------------------------------------------

📖 Chapters:
0:00 – Introduction
0:50 – The demo application
1:20 – Enabling the animations module with the provideAnimationsAsync() method
1:42 – Creating a state-based animation in component metadata with the animations array
1:52 – Using the Angular animations trigger() method
2:16 – Creating animation states with the state() and style() methods
3:20 – Creating a transition between animation states with the transition() and animate() methods
4:42 – Triggering the state-based animation with interaction events
6:55 – The final working animation

------------------------------------------------------------------------------

#angular #angulartutorial #animation

[ytamb]

Thanks. That was a clear explanation of the basics that I needed to hear. I've been turned off angular animations in the past because the animations array has always been incomprehensible.

[MohamedAyman-lfsz]

That is very useful, thank you.
Keep it up please. 👏🏼👏🏼

[drzewko]

What a hidden gem! Amazing content man, keep pushing. Also, I have a question: when setting this whole animation, is the sidebar disappearing from the DOM when it is closed? Or does it just sit out of the user view? I am asking because idk if I should switch to the angular animations from using tailwind classes to achieve similar thing. What do you think?

[guicercal]

what are the advantages of using this instead of css classes to manage the animations?