Starting an SVG

[00:00:00]
>> Sarah Drasner: So when you're starting to think about building out an SVG animation, sometimes it can be hard to think about. You have an SVG, now what? So let's break down how I kind of think about it, because I don't know any other way. But you can do it however suits you.

[00:00:16]
I'm gonna have you do a little exercise about this. So I mentioned I work for CSS-Tricks, and a while ago we had this logo Easter egg thing. So if you went on to the toggle, if you toggled it, it did all of these goofy, silly things. And then it changed to CSS-Tricks and then it goes back.

[00:00:34]
And it has all these nerdy stuff like link and a fork. And this is our logo is the query selector all-star, so it turns into the K. And then it turns into a star for a planet. And, yeah, nerd, nerd, nerd stuff. So the way that I do this is I get everything on the page first.

[00:00:55]
I get everything inside the SVG, and it all is stored in one SVG. And then whatever is not there initially, I hide. I just say opacity zero for everything that I'm not using yet. And that way I'm spending all of my time bringing one thing on to a page and figuring out how that transition works.

[00:01:17]
So I'm saying like, okay, this star is gonna be, this K is gonna become the star. But I'm gonna remove the star at first and decide how I want that drawn in and how I want it to come on and things like that. So then I can kinda compartmentalize what's gonna happen one at a time.

[00:01:34]
And you might notice that the way that it transitioned from one to the other was the same thing each way, right? That's because I'm using GreenSock which we're gonna play with later. I make a timeline, so the whole thing is just like a series of events that I've ordered in time.

[00:01:49]
And then the great thing about GreenSock's timeline is I can re-trigger it and even reverse it. So I'm just using the same timeline, and I back it up and then the same thing happens. So I can reuse that kind of concept to make it go backwards and forwards.

[00:02:04]
But the big thing I want you to understand here is when you're starting to play with animation, think about the first thing you wanna have happen and the last thing you wanna have happen. Have them both in the canvas at the same time and slowly reveal things as you need them.

[00:02:20]
So design everything first, slowly unveil things. This is how I planned this animation. It's horrible, this is like chicken scratches. I drew things out, and I decided things sucked, and I destroyed ideas. But I could do it all within 15 seconds or something and decide I didn't like an idea because it cost me nothing to do this.

[00:02:45]
It would have taken me three hours to implement something, decide it sucks, and go back. Instead, I'm playing around with those ideas and kind of understanding things. I don't know what the bee is about. Don't worry about the bee. [LAUGH] That's just me being weird. [LAUGH] Ugly storyboards save you a ton of time.

[00:03:06]
I don't even remember what this is for. It's so bad that I can't even remember what animation this was. But I guarantee you that drawing these kind of chicken scratchy ideas allowed me to kinda understand what I wanted to have in the middle. I knew what I wanted to have in the beginning.

[00:03:23]
I knew what I wanted to have in the end. But I didn't know how I wanted to carry those ideas out until I kind of made these sketches which are just notes to myself. And the lower fidelity they are, the more you can dispose them, right? They cost you nothing.

[00:03:37]
If you spend 15 seconds on something, then you can go, well, that's not a good idea and then move on to the next one. Or draw three of them and then decide, okay, the one in the middle is really the thing that I should be working on.