Recreating an Animation

[00:00:00]
>> All right, so just for fun. This is an example of a dribble animation that we would take a look at, and try to recreate this animation using, well, in this case, just CSS. But I'll also like to do is open the video in a new tab [COUGH].

[00:00:20]
And so this makes it a lot easier to just grab through and see what I could build. So there is a few elements in here, some of which we have talked about. There's that's over there where we are showing the text. And then we are, hold on, let me just try go back to it, wherever it is, yeah, so it's over here.

[00:00:45]
So we see the text pretty big, and then it sort of zooms out. So it's a pretty cool effect, and so let's actually start there because we're doing both our animation stuff and we're also doing a little bit of choreography. So let's see, first things first, I'm gonna get this color.

[00:01:10]
And so we're going to go over here and actually add a style tag. So, link:css. And so this is completely from scratch by the way. So you're seeing me do all this live. All right, so we're going to just import our base CSS. See how we did there?

[00:01:37]
Okay, there we go. Okay, so now to get started let's actually add some HTML. This is the first step when we're working with any animation. So inside of our body we gonna have two things. We gonna have this build your wealth thing, and also secure your legacy. So that looks like two h1 tags, so I'm just gonna call this Build your animations and Secure your development skills.

[00:02:09]
[LAUGH] Just changing the words a little bit there. And let's also add the font family, some sort of serif. Yeah, you know what, I'm just gonna do serif let's hope for the best over here. So also the background we wants to grab that color. And so that's gonna be background-color, whatever that is, that dark green.

[00:02:33]
And so the color color is going to be? Let's find out. Almost white. So there's one little E over there, and I guess that's just to make it just barely off white, which is cool I guess. And when we're looking at the layout over here, we're not gonna do all of these rectangles, maybe just three or four.

[00:02:57]
But we see that it is aligned in the center and it's also aligned in a column. And so what that tells me is that we use Flexbox. So display: flex, flex-direction column. There we go. And align-items: center, justify-content: center. Okay, so let's see how that looks so far.

[00:03:26]
Let's see we're gonna go back here, not there, and examples/dribble. Okay, good enough, good start, right? So now we want to just adjust the font sizes over here. So this is just going to be font-size. Let's do it based on the viewpoint width. So let's do maybe 5vw see how that looks, looks pretty big.

[00:03:51]
So maybe 8vw and margin 0, Way too big. So we'll just do 6vw, and call it a day. Okay, cool. So again, what's gonna happen is at first it's going to zoom in and then it's gonna zoom out. So we're showing the first one, and then we're both zooming out and showing the second one.

[00:04:15]
So let me just grab the color of this second one real quick. Okay, so we could do +h1 color, and again, this is sort of scrappy coding but it's okay. And let me just bump this back down to 5vw. Okay, so now let's do our animations. So when planning an animation especially for a dribble app like, sorry, a dribble design like this.

[00:04:46]
It's useful to think in a series of steps. So the first step is the first heading showing, and then the second step, so one, two, the second step is zooming out or scaling down and showing the second one. So let's go ahead and do that. Now since both of them are moving together it sort of makes sense to wrap those both in the div, just like this.

[00:05:16]
And I think in terms of time we'll just do the headings and show you, and hopefully get that working. So I'm just gonna call this class= "headings". There used to be a heading tag in HTML. They got rid of it for some reason. I'm still really upset about that, but yeah, you have div class= "headings" [COUGH] to do that.

[00:05:41]
So okay, let's do our animation. So first I'm gonna add keyframes for headings, yeah, the whatever I call it headings. And so this is first going to be translated down and zoomed in. I call it zoomed in, but it's scale. So when you think zoom, think scale. And so what I'm gonna do is I'm gonna go from, and we're gonna start at that scaled and translated position.

[00:06:12]
So we're gonna say, transform: translatey. Let's just say a 100% for now. And we also want to scale 1.5. Then we have to add that animation, so .headings, we have animation: headings. And it seems it happens over 4 seconds. So let's try that. First of all, let's see that looks, wow.

[00:06:41]
Okay, so that's something [LAUGH] it's working. Just make sure that they're centered. It all looks that Star Wars [LAUGH] sort of thing, [LAUGH] yeah. So actually we're not going to translate why they get you what, yeah, we'll keep it. So from to, and so this is actually going to stay from, remember we have three parts.

[00:07:10]
We have the beginning, that halfway parts where we start scaling out, and then we have the end parts where we're just in our normal position. So this is gonna be from 50%, and then two we have a transform of none. So we also want to add in the animation for the first heading.

[00:07:31]
So we're gonna do that right over here. Keyframes, I'm just gonna call this first-heading. And so this one, let's take a look at the video again. So we are going to sort of do that cool little wipe animation or swipe, and then just let the container zoom out.

[00:07:55]
So that's gonna happen in the first half of the animation. So when you're doing this you want to keep it in line with all the other animations. And this is something I didn't really talk about earlier in the workshop but choreographing animations is pretty difficult. It's pretty fun once you get the hang of it but unfortunately CSS doesn't give you a lot of good utilities to really reliably do that.

[00:08:20]
So over here we're going to have from, and this is going to be, let's see what opacity first just to make sure that it's working. And then at 50% we want opacity: 1, and we also want this for our ending state. Okay, so here's what that looks like.

[00:08:45]
It, well, we didn't add the animation. That's, oops. So h1:first-child, we are going to add the animation of first-heading, 4 seconds both. Okay, so this is going to to be transparent and then it's going to come back in like that. So now we want one for the second heading.

[00:09:12]
So keyframes second-heading. And so this one is actually going to have opacity at 0 at the beginning, and at 50%. And it's not until the very end where it actually becomes fully opaque. So that's second half of the animation. So we had this. Again, I forgot to add it, here we go.

[00:09:41]
Here we go, okay, come on. I forgot there is no second child, there is, [LAUGH] child 2, okay. Here we go. So this does that, and then there we go. So the last part of this is we want to have a different animation than that opacity. And so this is actually really cool.

[00:10:08]
I really liked doing this but you could add clip-path and you could give it a polygon. And so this, here let me just show you this cuz it's really, really useful. There is a clip-path maker over here. And so basically for clip-path polygon you are defining each of the points over here.

[00:10:33]
So what I'm going to do is, actually let me look at the video again. Okay, so we're going from the left to the right. And so the way that I'm gonna do this clip-path is these four points are pretty much gonna be all the way at the left and then those two points are going to be moving to the right.

[00:10:55]
So we're going to start with these this first one, the second one, and then the third one is at 0% 100%, and the fourth one is at 0% 100%. And so now we just make sure, I mean this isn't doing the fade thing, it's hard to do that in CSS, it is possible but also pretty difficult.

[00:11:20]
And now we're going to just make this polygon expand from the left all the way to the right. So 100 0, 100 100, 0 100, all right? And then the last thing I want to do is I want to just change how this headings thing is just because it's moving a little bit too far.

[00:11:41]
So, There we go.