2.5 Animating SVGs and Their Parts

In the last lesson we looked at the animate.css library and how to animate content into view as, as we scroll down the page with the help of some JavaScript. In this lesson, we'll create some SVGs in Illustrator and then animate separate parts of them. So, let's go ahead and create a new folder here called the Animating SVG Parts. Drag that into Sublime Text. Create our index file, and some boilerplate. [BLANK_AUDIO] And we'll create our CSS file too. So inside of our CSS folder we'll create style.style file. And let's go ahead and open this up in our terminal. So, desktop. [BLANK_AUDIO] And then we'll just run Stylus use autoprefixer-stylus watch style.style. Okay, so now we're watching this stylus file, it's compiled over here so we know it's working. Now, what we're gonna do is use this svg here. It's just a, it's an, it's a svg, it's a flower with three parts. So it's got the petals, a leaf, and a stem. And we're gonna animate each of these part separately. And the flower petals comes from, the noun project dot com. And it was designed by Niels Gesquiere, not sure if I'm pronouncing that right but here's the file if you want to, come and download it. Just make sure that you attribute the author. So, first thing's first, let's get this image into a browser. And the way we do that is, we hit Save As, and then, it doesn't matter what folder you're in, because we're not actually saving it, but, we'll just go down here to SVG. Hit Save. And then you can click this button down here, SVG Code. And it'll pull open, the actual code used to generate your SVG. Now these first few lines up here, we don't need. So we can get rid off all this generated by Adobe Illustrator stuff. All we need is the SVG one. And, all the contents of it. So let's indent this a little bit so it looks right. And we'll copy that. And we'll put it over here in our index file. So we'll save that, open it up in our browser. And, there's our flower. Our SVG flower. So we can close that now. And the first animation I want to create is taking these petals and just spinning them around in a circle, infinitely. So let's move our browser. Window over there, and our editor over here. [BLANK_AUDIO] So, you can notice, all these paths have an ID in them. So, we've got the ID of stem, ID of leaf, ID of petals, and even the has an ID of flowers.SVG, That's because I've named the layers, as such. And if you don't have those starting off, you can simply come in here and just write class leaf, or whatever you would like to do. Okay? So, again the first thing we want to do is create an animation where we're spinning around these petals. So, say keyframes. And we'll just call this animation spin. We'll say 0%. We want the transform rotate to be zero degrees, and at 100% we want the transform rotate to be 359 degrees. So, we're doing 359 instead of 360 because whenever it ends on 360, it'll effectively be zero degrees. So, we'll save that, come down here and remember our, petals, have the ID of petals, so we'll say petals. Animation, spin, two seconds. Infinite, and lets not forget to add our style sheet over here. So I'll say link CSS style.css. Then come over here and refresh. And now our petals are spinning, but they're spinning in a really crazy way. Like, they're starting. It almost looks like they're hinging around a point right around here. And that's called your transform origin. So, your transform origin is a property that we can change. So we can say transform origin, and we can simply say center. So save, refresh, now it's spinning, but it's gonna like spinning and then, slowing down and spinning and, that's the type of easing that we're using. So we can change that from ease to linear. So go over here and refresh again. And now, it's just spinning around continuously. Kinda like we wanted. So now let's slow the animation down a little bit, cuz it's a little bit too distracting. Refresh. And there, that looks a lot better. Now the next animation we want to make is having this leaf kind of wave up and down. So we'll come over here to our style sheet and say keep frames [BLANK_AUDIO] wave and then we'll say 0%. We want the trans, or the transform rotate. To be 0 degrees. And at 50% we want the transform rotate to be 3 degrees. And at 100% we wanna go back to 0 degrees. So the effect that this will have is it'll start off at zero degrees, rotate just a little bit downwards, and then go back up at 100%. And the syntax for this we can actually, just come up here and say 0%, comma, 100%. And save it. And we'll come down here and say leaf animation wave, and then we'll say something a little bit faster, like 400 milliseconds, linear, infinite, again. And then refresh, and you can see it's kind of like stabbing the stem. So again, we need to change the transform origin. Where it hinges from. And we'll say bottom left, so that this little edge of the leaf will be where it bounces from. So we'll save that and refresh. And perfect. So that's pretty much the gist of animating SVG parts. And we can even animate the whole SVG. So we can come down here and say SVG, animation, and then we'll just do that wave so it goes back and forth. And we'll say wave 400 milliseconds, linear, infinite. And we'll say the transform origin is the bottom. So it'll hinge from this bottom center position. So it kind of looks like it's blowing in the wind. So let's refresh. And that's a little bit too fast, so maybe we'll slow that down to four seconds. Save. Refresh. And now the whole svg is blowing in the wind. So, that's the gist of it. We can, pick out different parts, just like their, you know, their own elements. So we can do the SVG, we can do different paths. Pretty much anything that an SVG is composed of is subject to, CSS animation rules. So, yeah, that's pretty much it. Now, a good place to use this might be if, you're scrolling down a page, and then you'd fire one of those JavaScript functions that, says, you know, if it's scrolled down so far. Then maybe let's animate dot CSS, and we'll animate in our s v g, and then whenever s v g comes in, we'll have an animating to do all kinds of stuff. So, you're just adding like a lot, life to your pages. So in this lesson, we learned how to animate parts of SVGs, but we can do more with s than just move them around and their parts. We can also create a nice draw effect by animating the lines that compose these SVGs, and we'll learn about that in the next lesson.svg