From the course: CSS: Animation

Creating a motion path for CSS with offset-path - CSS Tutorial

From the course: CSS: Animation

Start my 1-month free trial Buy for my team

Creating a motion path for CSS with offset-path

“

- [Instructor] Motion Paths are fairly new to CSS right now, but as support for them increases, you'll be able to use them more and more in your own work. CSS Motion Paths are created using the offset-path property. This might sound a bit weird at first, but the reason for this is that you can use the offset-path to do more than just motion. So it makes a little more sense in that context. To create an offset-path, the first thing you need is, well, a path. At the moment, paths defined with SVG path syntax are the most widely supported, but there are other options that may gain greater support in the near future. For now, we'll use the SVG path syntax option. You can get this SVG path definition from anywhere you typically draw or code SVGs. I drew this path here in XD and I'm going to use that for the source of my SVG path code. So for this one, I will right-click and say Copy SVG Code, got that on my clipboard, and then I'll move to my Code Editor just to paste this into a blank document so you can see what kind of code we're working with. In this case, I've copied the code for the entire SVG, which normally would be exactly what I want, but in this case, I only want that path shape, so the only part of this SVG I need is this part right here in the D equals. From this capital N all the way down to the 219.99. Everything within these quotes, that's what we'll need for our path definition. One thing to note if you're getting your path definition from a visual drawing tool, these tools often add a transform onto your path, so for example, I have a transform right here. If you see very large numbers in this transform property, there's a good chance your path will show up in a completely different place than you intend it to, so keep an eye out for that. So I'm going to grab this path definition. I'm going to copy it and head over to my CSS to put this into an offset-path. I'm going to use this path definition to make one of our robots do a loop-de-loop across the screen. That robot is an image with a class of bot, so I'm going to assign it an offset-path property. And in that offset-path, I'm going to use the path definition I just copied from my SVG. So I'll give that the offset-path of path and then paste in the path information I copied from my SVG, finish off that line and I'll save my CSS. If I preview my file and my browser right now, I don't really see anything at all. I have my robot image and it has a path applied, but I haven't told it what to do with that offset-path, and we'll look at how to do that next.

Contents