00:00 We are done with the animations for our content section, good stuff. Next, we're going to tackle the logo tiles and here we're going to do a super cool roll reveal or at least that's how I call its effect, where the tiles start small and slightly rotated and roll reveal into place. So for this, you're going to define yet another keyframe called rolled reveal.

00:19 It'll be a little more complex but nothing crazy. But I think that what's really going to sell the effect is to have the right easing curve. So instead of just using ease out, we're going to try to have a fancy easing curve. You can play with different values and when you want a little bit more power, you can use something called a bezier curve.

00:35 Animation can have a timing function and you can pass a cubic bezier function. They're pretty hard to write by hand but luckily there is a website called cubicbezier.com that lets you visually tweak the easing timing function from start to finish. So you can see you can make it start really fast and then slow down

00:54 and then finish really fast again. And then when you hit preview, you will see the pink one in comparison to the linear one. So the pink one goes whoosh slows and whoosh again. And so you can pass this cubic bezier function for the animation timing function. So you should play around with a few values and see what you like.

01:12 Another approach we could do here is try to leverage some exceptional work made in that space. So there's a library called Open Props by Adam Argyle. This is the website for the library, which basically defines a whole lot of CSS variables for things like spacing, colors, and easings.

01:28 And something I particularly like here is there's your default ease in, ease out. But then there's some more advanced and fancy spring easings. So let's try these. And you can see that this spring has this little wobbly springy effect. And I thought that'd be pretty cool to try to use one of them.

01:47 So there's no right or wrong here, but I want you to play with different values. Try cubic bezier curves and try Open Props ease CSS variables. To make it easy for you, the easings CSS variables of the Open Props library have already been imported in your Tailwind config. So you essentially just have to go and consume it in your animation.

02:05 And with that, I'm going to leave you to that. Have fun. Good luck.