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.
------------------------------------------------------------------------------
📺 More Angular Animation Tutorial Videos:
1.) Enter & Leave Animations ( • Angular Animations: En... )
2.) The Keyframes Function ( • Angular Animations: Ke... )
3.) Query and Stagger Functions ( • Angular Animations: Qu... )
4.) Start and Done Events ( • Angular Animations: St... )
------------------------------------------------------------------------------
💖 Help Support the Channel:
If you found this helpful and want to show some love, you can always buy me a coffee (buymeacoffee.c...!
------------------------------------------------------------------------------
🔗 Demo Link:
stackblitz.com...
------------------------------------------------------------------------------
📖 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 #angular_developer #angulartraining #javascript #typescript #frontend #angularcourse #animation

[@MohamedAyman-lf1sz]

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

[@briantreese]

Thanks, will do!

[@veronikas.1347]

Thanks a lot, it was really useful!

[@briantreese]

Glad it was helpful!

[@freddiebanfield4634]

Very good video!

[@drzewko3871]

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?

[@briantreese]

Thanks! For this particular example, it just sits out of view. But, it is possible with Angular animations to animate items that enter and leave the DOM. You can see this here: th-cam.com/video/tDXkcITKDDY/w-d-xo.html.
You certainly don't need to switch away from tailwind classes, if it's working for you as is, I'd probably just leave it. It's just good to understand how animations work in Angular for when you encounter a situation where plain CSS won't work.

[@guicercal]

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

[@briantreese]

If you can use CSS animations there's absolutely nothing wrong with using them but sometimes you can't like when items are being added or removed from the DOM for example. Sometimes you'll want to stagger several items in as they enter. Sometimes you may need to do something else programmatically when an animation starts or ends. There are many different scenarios.
The animation module in Angular is not a replacement for standard CSS animations it's just another option that you can leverage, when needed, depending on what your particular need is for any given situation. You won't always need to use it but the more you know about it, the more tools you'll have to solve future challenges.
I hope that helps!