Choreography

[00:00:00]
>> Okay now we are gonna talk about the next topic which is choreography. Now we've so far been talking about doing transitions and animations with individual elements. But sometimes when you're doing an animation for a website or a web app. You might have multiple things that need to actually coordinate with each other.

[00:00:22]
And so there's nothing built in for CSS to do that. Of course, there's JavaScript libraries for animations. But honestly, by using CSS variables, we could choreograph our CSS animations just the same. So first of all, what do I mean by choreography? By choreography, I mean multiple elements coordinating with each other to make it seem like one cohesive animation.

[00:00:48]
So if you think of dancers,choreography moves, then one dancer might do something and then in response, the other dancer might do something else. Then they might do things together. So this is pretty much the same thing. Okay, so in order to demonstrate choreography, let's make multiple squares or what, we'll just make two or three, why not?

[00:01:14]
So let's see how that looks. Okay, we're gonna get rid of this animation real quick, well, let's not move it like a square anymore but let's just get rid of that right now. Okay. Okay, so now let's say that we wanna make a loader in a way. So what we wanna happen is basically had this go then this one than this one.

[00:01:46]
And you want them to move back and forth one after the other this. So the first thing that we could do is we need some sorta way and again this is using CSS variables. But we need some sorta way to indicate which ball we're talking about. So one way you could do that right now is you could the let well let's start by giving it an animation.

[00:02:10]
So animation we're gonna say move right. And that's gonna be after one second and so we want the film out to be both so let's add the key frames for that. And so we're gonna go from transform none to transform, let's say 25 viewpoint width. Okay, so right now won't do anything.

[00:02:41]
Let me make sure I have everything right so animation, move right one second, both. What am I missing? Let's. So, gonna close this out. And this should be working well. [LAUGH] Okay, so transform this should be translate X. There we go. Okay, so now it's gonna move to the right.

[00:03:18]
So I'm just refreshing the page and showing that that's moving to the right. Now,let's say that I wanna choreograph this. So it happens one at a time. Well, because we know that there are three, we could use nth index to just specify an animation delay for each one of them.

[00:03:38]
So we could say an nth index or sorry nth child at the second and child we wanna give it a delay. So we're gonna say animation delay in this is gonna be, let's see what happens after one second. And then for nth child three, we can say two seconds.

[00:04:03]
So now, each one of them is gonna happen one by one. But there's a problem with this let's see that we change the overall animation to be just 0.5 seconds. So now you have that awkward pause in between each of the animations. It's not easy to just go and find all of them.

[00:04:30]
I mean, it's easy over here but when you have multiple to pull elements that live in different parts of the document. Then it's not easy to hunt them down and change their values. So what can we do? Well, we could use CSS variables. So, if I set the duration here, duration to 0.5 seconds, I can substitute this value here.

[00:04:52]
So this is gonna be variable duration oops. And so now the animation delay here, we could just set it as that duration. But now we have to do something here. We know that this is gonna happen, after the first two animations. So we have to use calc. So inside of calc if we pass the duration and we're gonna multiply it by two.

[00:05:21]
Okay, so now that we use CSS variables, we see that they now happen one after the other. And so if we make this like really short. We see that everything is working, so that's pretty great. Yeah, so we could even make it a second and basically you get the idea.

[00:05:50]
We can also do what's called a stagger. And so when you stagger animations, that means that there's actually some overlap between them. So, instead of just var duration or var duration, we could say calc var duration and subtracted by some sorta fixed value you. So we could say just subtract 0.1 seconds here and subtract 0.1 seconds here too.

[00:06:19]
[COUGH] Now some of you might look at this and say hey, that could be a CSS variable to you're absolutely right. So let's just call this stagger and then negative 0.1 seconds. And then we could just replace each of these. Okay, let's see what happened over here. Let's make this actually more pronounced.

[00:06:50]
No. It's because I'm subtracting so there we go math is hard. Okay so you see we almost have it working. We just have to, let's see, minus fair stagger and we have to multiply that by two as well. Okay, so now we have a stagger over there. Okay, so if someone says like, hey, I like your animation with the three red balls looks really nice but I wanna add a fourth one.

[00:07:27]
All of a sudden that becomes a little bit of a headache because now you have to add nth child four and everything so what do we do in that case. More CSS variables but this is actually better because inside the HTML. And this is pretty much the only thing I like using this style type for, is for setting that CSS variable.

[00:07:50]
So I like to use I as a variable just like you would use an array. And set that to the index of each HTML element like in a list or something like that now if you're using a framework like view or react. Then you could just when you're mapping over items in the list you already had this value so it's pretty easy to do this dynamically.

[00:08:14]
And so now. Instead of doing nth child, we could pretty abstract this and say this is gonna be animation move right. And it's gonna be for the duration but our delay is gonna be the calc bear duration actually. So we had to put this in parentheses minus the stagger.

[00:08:46]
So actually, we could just do this interval calc, var duration minus var stagger. Okay, so now we have each of the intervals over here and we are gonna multiply that by that index value. So if I get rid of all these. Then, hopefully it works the same and yet it works exactly the same.

[00:09:18]
So now in our HTML, I could add maybe a couple more. And there we go. Now we have a nice stagger animation. So the main idea here is that we're using CSS variables to coordinate animations between elements. And so the reason that this is useful is because these variables can be defined actually at the parents.

[00:09:45]
So now you sorta have this shared context, you have these values to where any child element can read these values. And say hey I wanna animate after this thing animates well you could grab that CSS variable from the parents and do just that. So that's the basics behind choreography.