3.5 Animating Paths With jQuery DrawSVG

Hello and welcome back. Now that we've finished our circle animation, we can reload the frame and see that again. Now that we've finished the main portion of our animation, I want to animate the text. That's gonna go inside this C here and we're going to animate the outlines of that text. If you remember, if we go back to our CSS, let's get rid of the outline here and just set the opacity to 0 for the solid text. So that way we can see just the outline by itself. So what we're gonna do is we're gonna take this outline, which is just a set of strokes in our SVG file, and we're going to animate it. And we're gonna do it using another plugin that we haven't talked about yet. So let me undo what I did there, let me make both of those invisible, because we want them to be invisible by default. And then let's start with the starting pen that you can find the link for in your course notes. And once you open that up, we can click on Fork to create our own copy of it. Now, let me point out, let me jump over to another tab here, that GreenSock does have a plugin, called DrawSVG, and we can replay this little animation here, where we can see the outlines being traced out, and animated. And that's a very powerful plugin, it's very easy to use. But the only catch to this particular plugin is that it requires a club GreenSock membership which costs money. And it's definitely worth the money to get it because that club GreenSock membership has a number of other plugins that are really, really nice and give you some really cool effects. But I wanna look at a free option called jQuery DrawSVG. So I'm gonna jump over to another tab here. And this is a GitHub project. And as you can see here, it achieves the exact same effect. It takes an SVG and it animates the paths of that SVG. And it gives us a really nice effect and that's exactly what we're going for. So this is the plugin that we're gonna use for this particular course. And it is a jQuery plugin so it does require jQuery which is okay because we're already using jQuery in our file. So you'll notice if we go down to the usage link here that it is telling us that we need to include jQuery first and then we can include our jQuery draw SVG plugin. Well, since we're doing this on code Penn, I can't exactly download the zip file and make it work. Instead we're going to use the jQuery draw SVG CDN link and we can find that at JSdeliver.com and I will include all of these URLs in your course notes. But this is the link we need right here, this link to the min file for the jQuery draw SVG plug-in. And so I'm gonna copy that link. And then we're gonna jump back into our code pen, and go to our settings. In our settings, we'll go to the JavaScript tab. And as you can see here, I've already pasted that particular DrawSVG link, but now you know where to get it, in case you need to use it for yourself. If you're gonna use it locally on your own computer or upload it to your website, then obviously you can go to the jQuery DrawSVG site and just download the files. But we're gonna be using again the CDN link for this course. So now that we know a little bit about the plug in itself, let's make it work. So what we're gonna do, is we're going to animate the same SVG file we've been animating so far, this SVG with an ID of logo. And the reason this is gonna work is because the particular block of text that we're going to be animating now is the only graphic in this SVG file that actually has a stroke around it. And so, as soon as we plug this in and turn it on, that stroke is automatically going to animate for us in a very nice way. So we're gonna be targeting this ID of logo whenever we animate this. Let's jump back to our JavaScript and we'll come down to the very bottom. Let's skip a couple of lines and then I'm gonna create a variable here called My SVG and I'm gonna set this equal to, we're gonna use a jQuery selector here to point to our SVG object which has an ID of logos. We're gonna type #logo here. And then after the jQuery selector, we're going to say .drawsvg. There we go. Open and close parentheses, semi-colon to end our statement. So now we've created our DrawSVG object, and we've stored it inside this variable called mySVG. Now in order to cause it to animate, all we need to do is to point to that variable which we called again mySVG and tell it to animate by saying .drawsvg, except now inside the parenthesis and inside quotation marks, we'l type in the word animate and then a semi-colon at the end of our statement. So everything animates on and we don't see anything and it's because our text is invisible. So let's go back to our CSS, and let's just make the solid text invisible. So let's get rid of the #outline here. We do want that to be visible. And then we might need to save our file and refresh the whole page. So we'll reload the whole page, and let's watch the animation now. So now, our dots animate in, and when they're done we see a very nice animation that we had to do very, very little to create. And again, all we have to do is to create our SVG object first, or our DrawSVG object I should say, and then after that, we tell it to animate by pointing to that object, mySVG. And then calling on the drawSVG method in passing in the string animate and that gave us everything we needed to finish out that particular part of the animation. So now that we're done with that part of the animation. In the next lesson, we're going to finish this out by animating in or fading in our solid block of text over our outline. So thank you for watching. And I'll see you then.