2.6 Animating SVG Paths in Adobe Illustrator

In our last lesson we learned about SVG parts and how to animate them. In this lesson, we'll learn how to animate the paths of SVGs and make use of a really handy little plugin called walkway.js to make animating SVG paths a piece of cake. So, to understand what SVG path drawing is there's this great tutorial here called Animated Line Drawing in SVG by Jake Archibald. And if we scroll down just a bit we can skip over a lot of this. And just check out this this diagram here. So what we have is this SVG line and according to this stroke-array property it'll create little dashes that are spaced out. Now if we make this dash really, really big, like the entire length of the SVG line, now we can use the stroke-offset attribute to offset it. [BLANK_AUDIO] And if we start at its maximum length and then animate it, down to zero. It gives the effect it's being drawn. [BLANK_AUDIO] Now if we scroll a bit further down the page, you can see that we can find out how long this line is using JavaScript. And all we do is we get the query selector and whatever the name of the path is, whatever the selector for path is, and then we say get total length. So, then there are ways to create a transition, a CSS transition, modifying the stroke-array and stroke-offset, to create this drawing. But it seems like a lot of work so let's do it the easy way and there's this jQuery plugin called Walkway.js that does just that. Now, Walkway was invented as a result of this, polygon.com Playstation 4 review website. So if we refresh, you can see these animations happen. Pretty cool, huh? And as you scroll down it does it for all the different parts of the Playstation 4. Now if we go to the GitHub page and just scroll down to the Read Me. We can see the documentation here. The best way that I've found to use it is just grab this little snippet right here. And then we can specify the selector, the duration, what easing function we want to use. And then once we declare that SVG as a variable, then we can say SVG.draw and call the draw function on it, and it'll create those animations. So let's go ahead and get started doing that. And so, we'll create a new folder here. And we'll call it Path Drawing. Open it up in Sublime Text. Create our index file. [BLANK_AUDIO] Create our stylus file. [BLANK_AUDIO] Open up Terminal, go to our Desktop, cd to our CSS folder and run our Stylus Autoprefixer command. Okay good and then we'll open that up in its own window, put it on that side, put this on this side, excellent. Okay so, now on Illustrator you can see I've got a few different vectors here that I've created just to kind of show you how Walkway will animate these. So first, I've got this Tuts+ that I've kind of drawn with squiggly lines with just the Pen tool. It's not very pretty. I'm not a letterer. So anyway, we'll just come in here. Save as an SVG again. We don't actually have to press OK and save it. We can just click the SVG code. And then, we'll just grab the SVG code, copy it. And we can close that tab. And then we'll just paste that SVG code in there. Kay, Save it and refresh. And we can see Tuts+ is there. So now we need to grab the Walkway.js library. If we just come up here to grab the Walkway.min.js. We can just grab the raw file here and Select all, Copy and then we'll create a new file in our JavaScript folder. And we'll just call it Walkway.js. We're going to paste that in there and close it. [BLANK_AUDIO] And just down here at the bottom we'll include that. So script tag js-walkway.js. And then we wanna make our own custom script, so create one called javascript-main.js, save that. And now we need to create our main JS file. So inside here all we need to do is come back over to the GitHub. And we'll just copy this overwriting default, snippet right here. Paste that in there and the selector that we want to use, we can just use, SVG since we're just, since we only have one SVG on here. So, get rid of test. Just write SVG. Save it. And now come over here and refresh and you can see it's drawing these paths. Now, it's drawing them all at once, which is, very similar to what happens in the PlayStation 4 review site. And a lot of times, like, you actually don't want that. You want it to just draw one path all the way through. For instance, like a cursive signature, or something like that. So here's one path. And we'll just go ahead and save this as an SVG. Grab that code, close that tab, and let's get rid of this other SVG here. We'll just paste that new one in here. Come over here and refresh. And that's how that's accomplished. [BLANK_AUDIO] Now, you might run into a problem whenever you get into actually creating blocks and things like that. Where these are polygons. So Walkway.js can only act upon paths, path elements. So if you created a block, like let's just say like, we created a square, and then we tried to export the SVG. And look at the code, and right down here we've got a rectangle. So Walkway won't animate that rectangle. But, what we can do, we can come back over here, cancel this tab, and we've got a rectangle here and if we select the Pen tool. Well, we need to select our rectangle first. And then select the Pen tool, and just anywhere on this path, click on it, and then hold down Alt. Oh, I'm sorry. Anywhere on the path, click on it, okay? Now select it again, open up your your little Direct Selection tool, and we can find that anchor again. And then select the Pencil. And now we can kinda curve around from there. Now if we just take it and make it straight, though. If we hold down Shift+Alt at the same time, and make it straight and expand it a little bit. Now whenever we try to export it as an SVG, you can see that it's a path now. So that's a little trick for converting things to paths that should be straight or polygons things like that. So, let me just get rid of this. And I've done that technique to each of these boxes here. So this is you'll have to imagine this is an Xbox or a PlayStation, something like that, so. Come down here, save it as an SVG, click on SVG Code, grab our code remove that tab. And then we'll just paste that code in there, save it and refresh. And that's how you animate paths. In this lesson we learned how animating SVG paths works and how to use Walkway.js to easily accomplish this task. In our next lesson, we'll go a bit more in-depth as to how page scroll animations work and learn about another plugin called WOW.js that will let us animate content and to view quickly and easily.