Let's talk about what happens between the start and the end of our transition. What determines the trajectory and the path from A to B? Okay, so we've seen that we are starting with a blue square with little rounded corners, and on hover it becomes tomato is rotated and has bigger rounded corners. But what happens in between so far seems to be a very smooth transition from A to B. That smoothness follows what's called an easing curve.

to be a very smooth transition from A to B. That smoothness follows what's called an easing curve. You might have heard of ease in is out and those, uh, in CSS can be defined by the transition timing function. So here's yet another CSS transition, sub property transition timing function. And by default, if unspecified, it'll use the keyword of ease, which is sort of a pleasing work in most scenarios, uh, easing curve.

of ease, which is sort of a pleasing work in most scenarios, uh, easing curve. But let's try to define this to another keyword, ease dash in. And the way you can think about this word ease in, is that the motion will ease into its final speed. So it's going to start slow and accelerate towards the end of the transition. Think of a car that starts from a stopping point and slowly accelerates.

Think of a car that starts from a stopping point and slowly accelerates. So if I go and hover over the square, you should see that it starts slowly rotating and morphing and then it sort of accelerates. It's kinda hard to tell with this animation. So maybe let's quickly build another example. Uh, that's going to demonstrate these easing curves a bit better. Alright, so we'll keep our square,

these easing curves a bit better. Alright, so we'll keep our square, but let's have a div with a class of containers since we already have wrapper. And then we'll have box and we'll have 1, 2, 3, 4. That should be enough of these. And let's give them a modifier each box, dash dash one. And thank you very much. I will auto complete that just so we can apply different easing curves to each.

I will auto complete that just so we can apply different easing curves to each. Okay, so I will steal some of the styles from the square and we are going to have a box here. And each box is going to be, let's make it smaller, 50 pixels by 50 pixels and we can keep the rest. Alright, that's exactly what I want. But now let's style the container. So that container, uh, let's go display Lex flex direction column and gap one rem.

So that container, uh, let's go display Lex flex direction column and gap one rem. Yes. And we are going to also have margin top of two rems to create some separation. There you go. And so now we are going to, when we hover the container, which is the wrapper of these four boxes, we're going to do a translate X transform for our transition. And so the squares are going to go from point A to point B somewhere here.

And so the squares are going to go from point A to point B somewhere here. Uh, and they will all have different easing curves. So when the container is hovered, uh, we wanna target the box and go transform translate X and let's go 400 pixels. And remember, we don't wanna put the transition on the hovered uh, element, but let's put it inside the box here. So transition duration, let's go one second.

hovered uh, element, but let's put it inside the box here. So transition duration, let's go one second. So now all the boxes should slide to the right over one second by 400 pixels when we hover the container. And the container should be full width. So if I hover anywhere in that vicinity, yep, we have the translation. Alright. Okay. And now we can apply different easing curves

Alright. Okay. And now we can apply different easing curves or transition timing function values to each of these boxes so that we can see the impact of different, uh, values. So box, dash dash one, transition timing function is in. And from there, I'm pretty sure co-pilot will understand. What I want to do is out, give us a couple more is in out and, okay, let's go with that. I was gonna talk about this later, but why not?

and, okay, let's go with that. I was gonna talk about this later, but why not? So the first box has is in, so it's going to accelerate. The second box has eased out, so it should start fast and then slow down. The third one has ease in out, so it's going to start slow, accelerate, and slow down towards the end. And the cubic beier, I don't quite know, but we'll take a look. All right, so let's hover over this thing and take a look.

I don't quite know, but we'll take a look. All right, so let's hover over this thing and take a look. Whoa. Alright, so yes, you can see the first square at the top accelerating slowly, uh, where the second one starts strong and then slows down. The third one does both. And the fourth one has this overshooting it kinda winds up and then goes all the way too far before stopping. Cool. So the cubic bezier function used in the last one is what you reach for when you want total

Cool. So the cubic bezier function used in the last one is what you reach for when you want total control on the easing curve. We'll have a look at it in more details in a second, but just know that actually ease in is out and ease in out. Also, actually under the hood, use a cubic beier function. If you wanna learn exactly how cubic beier functions work, you can check the MDN documentation. It's going to explain the different values and how they are calculated.

It's going to explain the different values and how they are calculated. But you'll find out most people actually like to use a website called cubic beier.com, which is going to give you a visual representation of curves. And you can move handles randomly and see how it impacts the feel of the easing curve. So down here we have the default ease, and at the top we have a crazy, uh, curve that starts fast, then slows down and starts fast again.

and at the top we have a crazy, uh, curve that starts fast, then slows down and starts fast again. And if you wanna understand that graph, basically this vertical axis is the progression. So this is the starting state and this is the end state, and this is the representation of time. So if a curve is vertical like this in very little time, it's progressing towards the end state. So it's going to go really fast. And this section here is almost flatlined, so it kind

So it's going to go really fast. And this section here is almost flatlined, so it kind of stays at its current state for a bit. And then accelerates again, look at the pink one. It should stop towards the middle and then go zoom, zoom. And if we had the opposite like this, it's going to do the exact opposite. It's going to start slow and then zoom towards almost the end and then slow down again.

and then zoom towards almost the end and then slow down again. Let's take a look. Z Well, I haven't made it drastic enough like this. And so once you find a curve that you're happy with, you can copy that to your clipboard and then you can paste it directly in your transition timing function. And now the bottom square is going to follow this new easing curve that we've created.

And now the bottom square is going to follow this new easing curve that we've created.