Stagger Animation Solution

[00:00:00]
>> So let's add some choreography to this animation over here or lack of animation, let's add some animation and some choreography to that. So what we're gonna do is we're going to jump into style.scss. And we already have a few keyframes set up, of course we have the shake, but we also have slide-up.

[00:00:20]
So let's use that slide-up and do a little bit of choreography. So, first of all, we have the form sliding up, which is great, but now I want the input and the button to sort of appear after the form slides up. So we can add that same animation to the input in button, and let's see how that looks.

[00:00:45]
So, now you see that they all slide up at the same time, but we sort of wanted those to be a little bit separate from each other. So, instead of this I'm gonna separate this a little bit. We're gonna say animation-name: slide-up, we are going to give it the same duration.

[00:01:03]
So in animation-duration, var animation-duration, and we also wanna give it the same easing. Since this easing is already on the parents, we could do this, we could say animation-timing-function inherit: and it's just going to grab that same easing. Now we want these to appear after this animation-duration which we've set in a CSS variable.

[00:01:31]
So we could give this input a delay of that duration, so animation-duration, and so let's see how that looks. Okay, remember we need to fill-mode both. And I'd like to just use fill-mode both as a default. At least when something like this happens, you know that we can adjust the fill-mode.

[00:01:57]
So now, this is sliding up after the entire form slide is up. Okay, so now we have to do a little bit of math here because the animation delay over here is going to be that same animation-duration but we also want it to happen a little bit after the input.

[00:02:17]
So, instead of doing a lot of extra math here, again, you could hoist this up to the parents. So we could say that we had the animation-duration over here, and so this is basically going to be the animation-duration of both the input and the button. So for now, I'm going to set, Input-duration, and this is just going to be the same as the animation-duration.

[00:02:50]
And so we could set that here. Input-duration. And so now instead of doing animation duration times two or animation duration plus animation duration, we could do a little bit of math here and just to calc the animation duration, Plus the input-duration. So now, This is going to appear right after the input appears.

[00:03:28]
Now, of could do a little bit of staggering here as well, or we could adjust the durations. So, let's say I want this input-duration to actually be half the length of the total sliding up animation-duration. So I could say calc, animation-duration divided by 2. And now this will happen a little bit faster, and the button will come in at the right time.

[00:03:58]
So that's just one of the many examples that you could do with choreography. And hopefully you all had like a creative twist, or just something custom that you wanted to do. But that's basically how you choreograph animations, so any questions? Yeah.
>> So on the form element after our choreography has ended, you can do multiple keyframes on the same object.

[00:04:26]
Is can you do that in shorthand is that or can we do like longhand for so on the UI dash form. Once everything is ended and we wanna do a final like transformers scale up or is that better or is that a shorthand with a comma or just listing them out one after the other

[00:04:47]
>> Well let's do that as an example, so let's say that we wants to all right, this will be silly. Let's say we want to shape the form after everything is done animating. So what we could do is we could separate these into animation name, comma, separate, we want slide-up and then we want shake etc.

[00:05:08]
Or what we could do is we could have the longhand, also comma separated. So we could say we want to slide-up and then we want to shake, but we want to shake, let's just use the same animation duration so duration. But now we want to, this is gonna get mathy, so I'm gonna calculate all of this, we're just going to call this total duration.

[00:05:39]
And so this is going to be the animation-duration. Plus the input-duration plus the button duration which is the animation-duration and I'll just put that over here just to make things a little bit clear. There button duration. And so now, we could and of course you could rename these to whatever you want just to whatever makes sense for you.

[00:06:11]
And so for the animation, I want to move this up to the top we could give it a delay of that's total duration. And so we could have this for same amount of time. All right let's see what happens. So it's gonna slide-up that's gonna come in that gonna come in and then it's gonna shake.

[00:06:35]
So the main points that I want to drive home for all of this. Is that you really ought to use CSS variables for doing this, because that's going to allow you to manually adjust the duration and delay of each individual part. And by using a little bit of math, you don't have to change all the different values.

[00:06:56]
And so also the animation panel, someone did ask this in the chat, but you could press Cmd+Shift+P on the Mac, or Ctrl+Shift+P on windows, and this will open up the command palette. You could type animations, or what you could do is you could click the three dots over here, and it should be in more tools, in animations.

[00:07:18]
So, if I reload this, This is really cool because you could see each of the animations happening in a choreographed way. So, let me see if I could drag this column on, okay. So, we have the slide-up first, and then the input is sliding up, then the button is sliding up.

[00:07:42]
And then we have our shake animation right there. So they'll works pretty well. And we can inspect that, pretty cool. I would be pretty scared to put my email in the signup form like this, but just for explanation purposes it works.