DrawSVG

[00:00:03]
>> Sarah Drasner: DrawSVG and motion along a path, I'm bouncing, because I'm very excited. I love this stuff. All right, DrawSVG is super cool. All right, so, let's say you have a shape and that shape has a stroke and the stroke is dashed. But you make the dash really long.

[00:00:26]
The dash offset, the spaces between the dashes is an animatable property, animatable, animate, animatable, whatever. [LAUGH] So if you make it the whole length of the whole shape, you can go from having it be that dash offset is exactly the same length, right, it doesn't appear at all.

[00:00:46]
And then you make it go to zero, and it looks like it's drawing onto that SVG
>> Sarah Drasner: So you can make all sorts of kind of like things that draw themselves, if you seen a Nintendo that drew itself onto the screen or something like that. You can totally do this without GreenSock.

[00:01:10]
This is one of those paid for plugins, you don't need GreenSock. I'll show you how to do it with just CSS, or you could do it with just JavaScript. The nice thing about GreenSock is it has a few different options for how you can work with it that are pretty simple and and easy to use.

[00:01:27]
Of course, they always kind of make things really so easy that, why don't you just use it, kind of thing. If you wanna make it in just CSS, or you could just do this in JavaScript as well, what we're doing here is creating that dash offset, and I'm basically animating that dash offset.

[00:01:44]
So I have to find the length of that dash in order to do this. So, you can find the length of the dash with Java Script with Get Total Length. It's a native method, so you call the native method on that stroke and it will return a number.

[00:01:59]
So in this case I found out the amount and then I apply it here and now I have my little loader or what have you and I can animate it. However, if you have a response of SVG that's squishy, that number is not like the rest of the SVG, it's static.

[00:02:17]
So if you start squishing it you'll notice that it doesn't work for all of those different sizes. If this is just, this circle is gonna always stay this size cuz it's a loader, no big deal. But if it is gonna change, then you might need to use, maybe CSS variables in JavaScript to kinda talk to each other and make sure that we're using the right number so it's called at the right time.

[00:02:40]
Or you could do it all in JavaScript, or what have you, but you'd have to somehow communicate between the two. GreenSock, it doesn't really matter, GreenSock is gonna perform all those calculations immediately as you're doing it, so it's always gonna work. Also, they have all of these different options.

[00:02:59]
You can do absolute values. I love 50%, 50%, that's another one that's [SOUND] that's also the technical term. So you can do stuff like that. You can use booleans. You could have it just go to one side. So there's just tons of stuff that you can do with it that make it pretty easy to work with.

[00:03:20]
>> Sarah Drasner: So you can do stuff like this. It was Shell Silverstein's birthday, he's dead but I really like him. So I took his poem called Everything On It, which is a poem about a hot dog with literally everything on it. And I redrew it in Illustrator, and then I had it kinda come onto the canvas and stuff.

[00:03:42]
So it's a hot dog with everything. And I'm also animating some of the text, which I'm gonna show you in a minute how to do, too. And you can kinda celebrate New Years. So I made this pin to celebrate New Years, we have some texts being animated. Some confetti falling, and those fireworks are all DrawSVG.

[00:04:03]
So the first thing that's DrawSVG, if I replay it, are all these lines. That's all of those lines are DrawSVG. And we've got some stagger, right, stagger for the confetti. The fireworks started DrawSVG coming from 50% to true, yeah? And now it's jut like playing forever. We've got bubbles that are staggering and then they're also repeat negative one so they're constantly going.

[00:04:32]
But the other weird one is that I'm doing fluid dynamics and moving that cocktail thing around. No one notices that. I should, I mean, I spent way too long, that's not important. I I was like, did you see the liquid? And everyone's like no. [LAUGH] Sarah come on.

[00:04:52]
So here's another thing that I did with a few different techniques, this is DrawSVG for the dots. Remember how I said wind, elemental motion, we can see the leaves go. That's DrawSVG around to create the kind of circles around the rainbow. [SOUND] And that thing that goes around is also DrawSVG.

[00:05:21]
So I kind of use DrawSVG along with transforms and stuff to make something occur. This one is a movie because I wasn't sure the state of the click events this morning. But this is in a repo that you can check out, because it's actually a Vue app. So all of the different pieces that come on are components.

[00:05:39]
And I'm using the transition component in Vue to kick off those events and then I actually coordinate all the state with UX which is like Vue's version of redux. So if you're into frameworks, that's a good place to check things out. I also use some life cycle methods too.

[00:05:59]
>> Sarah Drasner: So for that fireworks, I have DrawSVG, right, 50%, 50%, to DrawSVG true. And then all of the fireworks go [SOUND]. And they're all named the same so I can grab all of them. Motion along a path, so that was all of DrawSVG. We just covered DrawSVG. It was super fast but you probably now know how it works.

[00:06:23]
It's not more complicated than that line of code once you load the plug-in.