00:00 All right, let's start by creating this role reveal keyframe animation and just making a note that the easing from the open props library is already imported in the file for us later. So I'll remove this comment and scroll down to the keyframe section.

00:16 You can see below we have our slide left and slide top, but above the comment here, I will define the new role reveal keyframe. And here I know because I got tricked by Copilot during the live workshop, what it's proposing here is not correct. Opacity is not a transform property.

00:34 Anyway, so we're going to ignore Copilot and at the from keyframe, we're going to do a few things. Let's do the opacity first, opacity, and remember it wants a string of zero. The scale is going to be the transform and here Copilot now knows what we're going to do.

00:51 Rotate 12 degrees and scale 0%. That seems correct to me. Maybe I can make it sit on one line so it looks a little bit more tidy. Yeah. And then I will duplicate this for the two keyframe. The opacity is going to be one, the rotation is going to be zero degrees.

01:08 I think you can just have zero and the scale is going to be 100%. And I believe, and I prefer using values of zero and one and anything in between instead of percent values, but it's just a personal preference. So let's save that and I can remove the comments about creating this roll reveal keyframe.

01:27 Now as I mentioned earlier, we want to respect these prefers reduce motion settings that a user may have turned on. So we want to create an alternative, which is much less in your face. It's going to be a simple reveal fade in. So let's create another keyframe called fade in.

01:43 And this one is going to be very simple from opacity zero to opacity one. And you know what? If the two keyframe animates to a default value, opacity 100% is a default value. I am pretty sure you can omit that and just have the from keyframe. And maybe we can add a comment here, reduced motion alternative.

02:03 All right, let's get rid of that comment. And so these are the keyframes out of the way, but now we need to create the animations here. So we have slide left, slide top. Let's add our fade in, which is going to be a simple, just animate once over 0.4 seconds with ease out.

02:22 So we're going to do that. And now we're going to do our last one, which is our roll reveal, 0.4 seconds, roll reveal. And we're going to go with the ease out, easing curve, and again, backwards animation fill mode just to see what it looks like. And let me remove all of these comments because I know what I'm doing here.

02:41 So this is the work that we've done, created roll reveal keyframe, fading keyframe, and these two here. Let's go and try implement that on the logo tiles. And then we're going to tweak the easing curve animation timing function here on the roll reveal animation.

02:57 So app.tsx, and we need to go find the list items, which is where we're going to apply the styles. Each style is wrapped in an li element. And that's very important. We're going to use roll reveal if the user has not opted in reduce motion, otherwise use fade in.

03:14 And we'll pull out the OS settings panel to show you how that works. So at this point, you've probably done your homework, but Tailwind has this motion safe modifier that lets you use the prefers reduce motion. So let's get rid of all this. And I will move that on multiple columns for no other reason than organization and personal preference.

03:34 And I will have an animation comment. You see, Copilot knew what I was about to do. And here we want to use animate roll reveal. But remember, we are going to need to wrap this in a prefers reduce motion guard. For now, I'll use it vanilla like this. And let's refresh our page. And look at this.

03:54 It's not bad at all. You can see all the tiles roll revealing themselves. It's a good start. I will now pull the Mac OS settings panel. And so we have this reduce motion here. So right now, if I opt in reduce motion and I refresh the page, the animation still happens.

04:11 If I turn it off, it also happens. What we want to happen is that when we toggle the reduce motion like so, the animation does not do this and instead uses the simple fade in keyframe animation. And that's very simple to achieve.

04:28 We can here go motion safe column. And this is Tailwind's prefers reduce motion media query. You can see literally prefers reduce motion, no preference. In other words, has not opted in prefers reduce motion. And then we're going to run the roll reveal.

04:44 So now when I toggle reduce motion, if I opt out of it, the animation should happen like that. But when I opt back in, it should not do the roll reveal animation. So that works. But now we want to replace the nothingness with a simple fade in. And that's pretty straightforward.

05:02 The baseline animation will be animate fade in. So we can leave it raw without any guard because this is going to be the default. And then this is going to override it if the motion safe condition is detected. You could, if you wanted to do motion and use the other one, motion reduce to be very

05:21 explicit about it. But without it, it's going to work by default because that is not going to apply if prefers reduce motion is turned on. But let's look at it now. If I allow motions to happen, we have the roll reveal. And if I don't, we have a simple fade in. Roll reveal, simple fade in.

05:41 Beautiful. Like I said, we don't really need here the motion reduce flag because the CSS will try to apply this fade in in every scenario. But then if allowed, we will override it with this motion safe modifier. Beautiful.

05:55 The last thing we want to do here in the case of a permitted motion is to tweak the easing curve. Remember, we're just using ease out and we're going to play with Open Props spring easings for that. So back in the Tailwind config file where we use ease out, instead, we're going to want

06:14 to use this easings from Open Props. So we are in JavaScript here and easings represents an object with multiple CSS variables. We are going to turn this into a template string so we can interpolate some JavaScript here and we are going to reach for the easings.

06:33 The beauty of that JavaScript import is we can see all the possible values from the easings collection. And we are going to go with a spring. Let's try five just for fun. It's probably a little too much. And you can see that the syntax was adapted because this variable has dashes and characters that cannot be in a variable.

06:52 So it has to be wrapped in quotes. So we use the bracket syntax to access it. And before I use it, let me show you on the app.tsx what happens now. If I scroll down to see what is represented by that spring animation, you can see we have

07:06 a very complex linear function here, which defines this springy animation where it overshoots a little bit over one here, 0.716, and then comes back down below and then lands on one. So this would be very tedious to write by hand and it's really nice that we can consume

07:23 a CSS variable that does all the hard work for us. It's obviously going to be way too slow, but it's going to illustrate the spring where you can see clearly that the elements overshoot, boing, and then bounce back into place. So let's replace that with real values that we want.

07:41 So 0.4 seconds and we're going to use the spring two, which is a little bit stiffer and less wobbly. We should have a really nice, subtle, but slightly bouncy, springy animation. And that, my friend, gets us in a really nice position.

07:58 The next thing that's going to really make this animation come to life is to stagger each style by the same amount of delay to make this waterfally appear effect. And this is going to really take it to the next level. I'll see you there.