I wanna show you a CSS property that you can combine with key frames when you want your animation to follow a very specific path. Okay? I've made the safe assumption that we are all getting bored of the blue square. So in this video we are going to use a hot pink rectangle instead, here are the stars for this pink rectangle. And that's literally the only thing that we are rendering on the page.

And that's literally the only thing that we are rendering on the page. Now let's say that we wanted this rectangle to follow a specific path when animated. So we'll create some key frames at key frames and we'll call that follow path. In previous lesson you've seen that we can create some sort of elaborate path by using transforms, rotate scale and so on. But if you wanna do something much more complex,

rotate scale and so on. But if you wanna do something much more complex, you can reach for the offset property. The offset property is used to animate an element along a defined path, which is very cool. And so it has a few properties. The most important ones here will be offset path where we can define the actual path and then we can animate the positioning on this path

where we can define the actual path and then we can animate the positioning on this path with offset distance. So why don't we go in the rectangle and define an offset path and we will trust co-pilot here. I don't really know what it's going to look like. I could work it out, but I will just take this at face value. And then in the follow path, key frames, we are going

take this at face value. And then in the follow path, key frames, we are going to have a two key frame where we set the offset distance to a hundred percent. The default offset distance value is 0%. So here our key frames are gonna go from the start of the path to the end of the path. And now let's wire up this animation. So here, animation follow path three seconds is in out infinite and alternate.

So here, animation follow path three seconds is in out infinite and alternate. I like this. All right, let's take a look at it. And it looks like copilot just gave us a little dome shape. And so the path followed is that dome shape. But if you don't believe me that it's following an actual path, let's jump in Figma, create a custom path, and then make the rectangle follow that path. Okay? So I'm here in Figma using the pen tool

and then make the rectangle follow that path. Okay? So I'm here in Figma using the pen tool and we will make a random shape. Let's add some curves to it. Maybe go here down there, another curve, just random stuff. Whoops. Let's have one more. All right, I think that's enough. Now I will just make the stroke a little bit bigger. Let's say four. And let's have rounded caps

Now I will just make the stroke a little bit bigger. Let's say four. And let's have rounded caps so it just looks a little bit nicer. All right. And I think that'll do. And now I wanna get the path for this shape. So there's possibly better ways to do that. But I can copy the SVG here and let me just paste the whole thing here. And what I'm interested in is this path element, particularly the D attribute.

And what I'm interested in is this path element, particularly the D attribute. So I want to grab everything starting from the M all the way to the end and I'll copy this. All right, let's delete this. And I will update the path here to use whatever I copied from the SVG, which is our shape that we created in Figma. Alright, right. Let's take a look at this. This is uh, this is pretty cool.

Alright, right. Let's take a look at this. This is uh, this is pretty cool. Uh, it's a bit confusing without the actual shape behind. You can actually see that it seems similar, but why don't we actually display the SVG and then try to line it up with the motion that we've created. So in the page template here, let's paste the actual SVG that we copied from Figma. And it's still not going to be great

that we copied from Figma. And it's still not going to be great because we're going to have the SVG elements and then below it we're going to have a rectangle that follows the same shape. And so as you'll see, uh, the path is being followed but the elements are stacked on top of each other. So it's not really doing the trick. So why don't we play with positioning absolute and relative to overlay the two elements And well,

So why don't we play with positioning absolute and relative to overlay the two elements And well, I could add classes and then style it, but I'm a bit lazy. Usually I use tailwind for this. So let's use a style tag and all we have to do here is position absolute. So that's going to take this SVG away from the layout. And so the rectangle that follows the path should stack exactly where the SVG currently is.

that follows the path should stack exactly where the SVG currently is. And now this is really setting the trick and I think that now you can believe me that our rectangle is actually following a custom path because it's obviously doing the thing nice. By the way, it kinda sucks to have to maintain the path here in the markup and also here in the CSS. So one thing you could do is give an ID

and also here in the CSS. So one thing you could do is give an ID to this path elements, let's call that motion path. And then in the CSS, instead of passing a path, once again we can reference it via the URL and we gotta pass the ID of motion path. And I believe that should still work exactly the same and looks like it does. Okay, so let's make our animation a little bit more fun. Let's say that at 45% of the animation

Okay, so let's make our animation a little bit more fun. Let's say that at 45% of the animation we want the offset distance to not be 45 but 55%. And then copilot, can you work out? No you can't. At 55%, I would like to have the opposite come back to 45%. And because our rectangle is going to travel a bit more, let's maybe bump our animation duration to five seconds. Alright, so this should be fun. The rectangle should go to about halfway and then come back and then finish.

The rectangle should go to about halfway and then come back and then finish. And then because of the alternate, it's going to do the same sort of go past halfway, come back and then keep traveling. Very cool. And as you can imagine, you can do a lot more with different key frames. Uh, so this is pretty cool. Cool. Another great thing about offset path is you are not limited to just using path like we've done up to this point.

Another great thing about offset path is you are not limited to just using path like we've done up to this point. If I go check the offset path properly on MDN, you can see that it accept a huge range of values. So you can use Ray, we've used a URL reference and we've used the path here, but you can see that there's a lot more values and you can also use shapes like circles or polygon. So this reminds me that there is a great tool online to create clip path.

So this reminds me that there is a great tool online to create clip path. Lemme search for it. Clip path generator, uh, I think it's called. Yeah, clippy. That's the one. And the reason I thought of that is because it gives you a polygon shape so you can use uh, some of the default values. Let's use the star here. So I'm going to copy the star polygon code.

Let's use the star here. So I'm going to copy the star polygon code. And so above our SVG here, let's try something new. I'm going to have a container element and then inside of here we're going to have two things. We are going to have a star and yet we are going to have a marker. So let's go and write some custom styles for these. I'll write them at the top here. So our container is going to be a position

I'll write them at the top here. So our container is going to be a position of relative. Let's go with 400 pixels and height, 400 pixels too. And then inside of this container we are going to have our star, which has a position of absolute, it's going to be inset zero and background. Let's go with hot pink. So let's look at what we've got so far. All right, we doing some art here.

So let's look at what we've got so far. All right, we doing some art here. I mean that's what we wanted and that's what we have. Let's just add a bit of margin bottom to separate from the other example. And I think I'll make the square just a little bit smaller. Let's change the width and height to three 50 pixels. And let's go margin bottom five rem. Okay, that's a little bit better. So now we're going to apply a polygon

Okay, that's a little bit better. So now we're going to apply a polygon as a clip path on this star so that it becomes actually a star instead of a square. And then we are going to try to make our marker follow the edge of the star, uh, with the animation that follows the path. So in the star, I am going to go clip path and I will paste the polygon that I copied from the website just

and I will paste the polygon that I copied from the website just before so you can see the coordinates here. And as expected, we now have a star. So now let's make a little marker, a rectangle that's going to follow the edges of the star. I will go below here and have that marker. And it's also going to have a position of absolute. I'll go top zero and left zero. We will have a width of, yeah, 10 pixels,

I'll go top zero and left zero. We will have a width of, yeah, 10 pixels, but a height of only, uh, four pixels. And finally let's give you the background of yeah, black. It's going to look nice on a hot pink. And so here's a little square, it's a little bit small, so I'll make it just a tiny bit bigger. And then we are going to set the offset path to make it follow the star and it should click into position with the star.

to make it follow the star and it should click into position with the star. So maybe height of six pixels and width of 15. And now check this out. We are going to go offset path. And here once again, I will paste the polygon that we have. So this polygon here is the exact same. Then this polygon, which actually makes me wanna define a CSS property. Instead, let's put it at the root level and we are going to have dash, dash star.

Instead, let's put it at the root level and we are going to have dash, dash star. And this is going to be the polygon. So now I can reuse these star in both places. So here and then same deal, we are going to replace all of this with var dash star. So now our marker should follow the path of the polygon, which is the star. But let's copy this animation here. We can keep it exactly the same

But let's copy this animation here. We can keep it exactly the same and apply it to the marker as well. And let's go take a look. Alright, so it looks all right. It doesn't look fantastic, but it does the trick. Uh, and the really cool thing is because we've used a CSS variable, if we change the polygon in that variable, uh, the shape should change and it should still follow. The marker should still follow the shape perfectly.

the shape should change and it should still follow. The marker should still follow the shape perfectly. Matter of fact, let's break this shape a little bit by tweaking the coordinates. Um, this one can go here, this one can go inwards a lot. And so now I will copy the updated polygon and I'm going to replace the value of the CSS variable here. Like so. And to everyone's surprise, we now have a new shape and the marker perfectly follows that shape. Pretty cool. All right, there's definitely some fun

and the marker perfectly follows that shape. Pretty cool. All right, there's definitely some fun to be had by exploring what you can do with key frames and offset path combined together. I hope you enjoyed this lesson. I will see you in the next one.