Transcript from the "DrawSVG" Lesson
>> 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: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: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.
>> 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.
>> 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.