00:00 I am looking at the Excel breakpoint here and the animations still slide up. So we're going to create a new slide left keyframe animation and replace that for the Excel breakpoint. In the Tailwind config, where we've defined keyframes and animations for the slides top, we're going to do exactly the same but for slide left.

00:19 Slide left. And I will copy that because it's very, very similar. And the only difference is we're going to translate the x-axis. And by translating x by 20 pixels, it's going to move it to the right. And so that's exactly what we need.

00:34 And the same way here in the slide top, I will duplicate this and call that one slide left. And it'll consume the slide left keyframe animation and everything can remain the same. That's pretty simple, right? So now let's go and apply this slide left animation at the Excel breakpoint. And you can see there's a slight code change here.

00:53 Kelly, the co-worker, has used the CLSX purely for organizational purposes. So we're not actually merging complicated classes. But it's a nice pattern to be able to, when you want to have different style concerns like this, to be organizing in different lines. And you can add comments like animations.

01:10 And I'm introducing this pattern here because in the next lessons, we're going to add more and more classes. And it's kind of nice to organize things in different concerns, even if it all ends up mashed together in the front end, just like if it was here. So we have animate slide top.

01:25 And at the Excel breakpoint, we want to use the new animate slide left. And let's take a look. As I refresh, you can see that now the logo animates to the left at the Excel breakpoint. But before that, it animates from the bottom to the top. And I like that as the animation changes, it gets re-triggered.

01:45 So we can really preview it nicely by toggling the screen size like this. So we're going to do the same for the heading and the paragraph. And we have animate slide top. And at the Excel breakpoint, animate slide left. I will intentionally leave it like this. You can see the comment that hints at the delay that is probably now wiped out. So let's try.

02:06 And you can see that it slides to the left, but we have lost the animation delay. Hopefully, you understand why as we talked about it in the previous lesson. So we're going to re-unfortunately define this at the Excel breakpoint. And so now we have our slide left happening. And we just have to do the final one.

02:26 Let me get rid of the comment. And there is nothing new here. So I'll go fairly quick. We'll do exactly the same. I'll copy this in my clipboard. And then go Excel, animate slide left. And Excel. And we're going to redefine the animation delay of 0.8. And with that, we have our beautiful slide left animation,

02:48 which is untouched for smaller screen sizes. But as soon as we reach the Excel breakpoint, we switch to this slide left instead. Very cool.