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. 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. Now, before we get too far along,
it’s important to note that I’ve already created several videos focused
on the animation framework in Angular. They cover the basics of setting
up and using Angular animations, creating state-based and enter/leave animations,
using the keyframes, query, and stagger functions to create more complex animation sequences,
and using the start/done animation events. So, if any of those concepts are
unfamiliar to you, you’ll probably want to check those videos out first
so that you’re not lost in this video. And, to make them easier to find, I’ve created an Angular Animation
playlist to help, so check it out! Something else to note here,
I received a good suggestion mentioning that it would be helpful
to have both a before and after demo. So, starting with this
video, this is now the case. In the video description, you’ll
now find a link to both the code before and after so you can follow along easier. Thanks again for the feedback! Ok, enough of that, onto
the example for this video. Here, we’re back to the demo application
we created in an earlier video on angular animations where we learned how the
query and stagger functions work. This application lists out various NBA players. It starts off showing only Lebron James, but when we click the add button,
we load in several more players. Now this doesn’t look too bad because
we’ve already added some animations. But let’s imagine that the client we’ve built this for now wants to highlight these list
items as they’re added and removed. They want them to highlight green when they’re added and then highlight them
red as they’re being removed. Ok, no prob, we can do this. Ok, let’s get started by adding the new
animations needed for the enter state. When we look at this existing enter animation, we can see that this animation
happens pretty quickly. That’s going to be way too short
of a duration for the color change, they want that to last for a while. So, since we’ll need a different
duration, we need a whole new animation. So, we’ll add another query, and it’ll be another
query for items that are entering the DOM. When items are added, we need them to
start with a light green background, so let’s add the style method. And inside, we’ll add an
object with a background color. For its value, let’s use an rgba color function. The red value will be zero, the green value will
be two fifty five, the blue value will be zero, and let’s go with point two for the alpha value. Now, we need to animate this background
so let’s add the animate method. We what this color change to
take a little while so let’s add a duration of three seconds, and
let’s add an ease-in timing function. Then we need another style function. This time we’ll change the background
color to the original rgba value. It’s going to be black, so we’ll
add zeros for all of the colors, and then we’ll set the alpha to point one. So, it’s a pretty light gray
color in its default state. Now we also want to change the text
color so let’s add another query. Here, the player’s name is inside of an h2,
and the player’s stats are inside of dl. So, this time we’ll query for an h2
within the entering item, and a dl too. For these, we’re going to start with a green
color so let’s add another style method. And we’ll make the color green. Now we need to animate this to the original
value so let’s add the animate function. We’ll go with the same animation duration and
easing function of three seconds and ease-in. Then we’ll add the style function and
animate the color to a value of inherit. Now, the last piece, we need to
make both of these queries optional. And, you can see why in the video on query
and stagger animations if you’re curious. Ok, let’s save and see where we’re at. Let’s hit the add button
to animate the players in. Ugh, that’s super weird right? Probably not at all how you we’re
expecting and certainly not what we want. Well, what’s happening here is that
we have an array of animation steps. Angular simply processes and executes
each animation step in sequence. So the first :enter animation
runs and it takes a half second. Then, as soon as it completes, the second animation runs which changes
the background color over three seconds. Finally, after that animation completes, three and a half seconds in,
the text color animation starts. So, essentially, each animation is
blocked by the previous animation step. In this case, this is no good. We need them to all animate at the
same time, and this is where the Angular animations group method comes into play. To set up animation steps to run at the
same time, it’s actually pretty easy. We can use the animation group function. This function expects an array of steps
consisting of AnimationMetadata objects which is what we’re used to with many
of the other animation functions. Animation options can optionally be passed where
needed but we won’t need these in this demo. Ok, so how do we use it within our example? Easy, we just need to wrap
these three animation steps. Ok, now let’s save and try this again. There, that looks great. They are all animating
together at the same time now. Pretty cool right? Now, that we know all of this, let’s add the
red animation as the items leave the DOM. Let’s add another query here. We’ll query for leaving items this time. Here we’ll start from the
initial gray background and animate to red so we don’t need a starting style. We just need to add the animate function. This time, we’ll want the transition
to happen pretty quickly so let’s go with a duration of two hundred fifty
milliseconds and we’ll use ease-in. Now let’s add the style function, and animate
the background color to an rgba value of two fifty five for red, zero for green, zero,
for blue, and point two for our alpha value. Next, we’re going to change the text
color so we’ll add another query. We want to query for the h2 and dl
within the leaving items this time. And this animation is similar to
the one we just added where the text is going to start from its initial
color so no starting style is needed. Now we can add another animate function with the same two hundred fifty millisecond
duration and ease-in timing function. And, we need to add another style,
this time with a color of red. And let’s not forget to make
these queries optional too. Ok, let’s save and try it now. Ok, everything still looks good when we add. And, now they are properly
turning red when they leave too. Nice. So, it’s pretty cool to see how we can override
the default sequential behavior for animations. So, this is yet another handy feature
when it comes to animations in angular. Hopefully it helps you out somewhere along the way where you need multiple
animations to run in parallel. Now remember, there’s a lot to the animation
framework, so I’ll go ahead and stop here for now, but I will be creating more videos on Angular
animations in the future so stay tuned! Until next time, thanks for watching.
