Angular Animations Tutorial: Parallel Animations

If you’ve spent any time creating animations in Angular, you may have noticed that the animations added within component metadata run sequentially. Meaning, they’ll run in the order they are added within the array. Well, sometimes this works fine, but sometimes it doesn’t. Sometimes, we need multiple animations to run in parallel to orchestrate them properly. Well, good news for us, Angular has a solution for this, the Angular Animation group() function. In this video I’ll show you why, and I’ll show how you can animate things in parallel. Alright, let’s get to it.
------------------------------------------------------------------------------
📺 More Angular Animation Tutorial Videos:
1.) Learn the Basics ( • Angular Animations Tut... )
2.) Enter & Leave Animations ( • Angular Animations Tut... )
3.) The Keyframes Function ( • Angular Animations Tut... )
4.) Query and Stagger Functions ( • Angular Animations Tut... )
------------------------------------------------------------------------------
💖 Help Support the Channel:
If you found this helpful and want to show some love, you can always buy me a coffee (buymeacoffee.com/briantreese)!
------------------------------------------------------------------------------
🔗 Demo Links:
- Before (stackblitz.com/edit/stackblit...)
- After (stackblitz.com/edit/stackblit...)
------------------------------------------------------------------------------
📖 Chapters:
0:00 - Introduction
1:40 - The demo application
2:27 - Adding additional color change animations on :enter
5:20 - How Angular animations run sequentially by default
6:02 - Using the Angular animation group() function to run animations in parallel
6:51 - Adding additional color change animations on :leave
8:37 - Conclusion
------------------------------------------------------------------------------
#angular #angular_developer #angulartraining #javascript #typescript #frontend #angularcourse #animation #parallelanimations

[@DraaElMizan]

Hi Brian, like your Pluralsight courses. I think you definitely should create a course about Angular CDK as well as Animation make it available on Pluralsight
. Great content thanks for sharing.