Sprites

[00:00:00]
>> Sarah: SVG Sprites. We're gonna cover this section, and I'm not gonna make you do an exercise for it because I think it's good to know about, but it's a little less useful than some of the other things that we're gonna cover. So, we're gonna go straight from SVG Sprites.

[00:00:12]
I'm gonna explain some principles, and then we're gonna go directly into GreenSock in the next section. When we talk about GreenSock, before we talk about GreenSock we're gonna talk a bit about all the tools, all the ways to animate and why we're talking about GreenSock of all of the tools in the world.

[00:00:30]
So that you get a sense of what you're deciding on. All of those tools are totally acceptable, I'm just giving you kind of, we're gonna enter opinion land again for some of that stuff. I'm a very curious person, I play with everything. So I'm just basically giving you my TLDR from having played with literally every single animation library on the planet.

[00:00:54]
Okay, so let's start with SVG Sprites. So there's this great pen, well, I think it's a Smashing Magazine article first by Joe Harrison that shows this thing with SVG sprites. So even though an SVG can be just used as an SVG, you could create a sprite sheet out of SVG and show different parts of it.

[00:01:17]
Based on what fidelity you want to show your users. So in this technique, he's moving the viewbox, right? We said that the viewbox is kind of like a window. That's basically what you're doing with sprites to begin with when you're working with them. You're taking a background, a piece of a background of a bigger PNG usually for a sprite sheet.

[00:01:38]
You can also do a similar thing with sprites. And because of that, you can do things like walk cycles. So there's a couple of different ways that you could do walk cycles. You could move each piece of the SVG and make arms and legs, but that's a lot of mechanics.

[00:01:52]
And actually there's a really great pen by Diego that I can link up later where he does actually get all the mechanics of all of the arms and legs pieces moving. But something that might be a little bit easier, is to create what I did here, which is a sprite.

[00:02:07]
And basically I'm drawing each, I draw him like walking, and then I draw the next piece of him walking, and then I draw the next piece of him walking until I have a full walk cycle. And then I'm cycling through that background image using a thing called steps.

[00:02:24]
So if you've ever used steps in SVG Animation, or in CSS Animation, it's gonna take one frame at a time and go through each one. So here is what that looks like. I'm kinda doing like a poor man's animation here by changing the color per frame instead of doing it, having the computer interpolate those values.

[00:02:46]
I'm just going, okay, you're red, you're a little bit orange, you're a little bit yellow and going down the hue spectrum, and I just set up a board. And what I do is, in Illustrator, I'll set up a really long board. I'll say objects split into grid. They have that thing and then it'll make guides for me.

[00:03:07]
So I can just create the drawing, make a little box around the drawing, and copy-paste it into the next one. Move it around a little bit, copy-paste it into the next one, move it around a little bit, copy, and so on and so forth. So you don't have to start again in everything.

[00:03:23]
And that's also how you know to keep it stable per drawing. You're just moving those paths a little bit each time, right? You're just pulling those little things around. And to make this effect for the background, I have a few different layers of those SVG animations. So I have an SVG that's like the I have a background, and then I have a SVG that's like the mid-ground.

[00:03:49]
And the next mid-ground, and then the next mid-ground, and then the top. And what they're doing is, the things that are closest to me are moving quicker across that canvas. And the things that are further away from me are moving slower across the canvas. And I also have to check and make sure that they, when each end of those backgrounds lines up, so that it's a seamless loop.

[00:04:14]
A building doesn't end and then there's a grass thing or something like that. It has to match on each side. So what I've done is I've created one area for all of them and extended it for each one with an add extend. And then I have one, I just have one keyframe, and that's 100%, the background position moves 200%.

[00:04:39]
And I reused that for each one of these. So I have seven seconds, like I said the foreground 7 seconds, 15 seconds, 20 seconds. So the 20 seconds is gonna take a long time but I'm reusing the same keyframes. Do anyone know why I would do a negative delay?

[00:05:02]
>> Speaker 2: Starts earlier.
>> Sarah: It starts earlier. So, why would I do that instead of starting it at zero?
>> Speaker 2: So that the animation start at different.
>> Sarah: That's right, that's exactly right. So remember how we talked about how the backgrounds have to kind of line up and start the same way?

[00:05:23]
Well, backgrounds in real life don't all start at a perfect seam, right? That just kind of looks unnatural. Usually start looking at a screen or a like street and the street is in the middle of the street. And you're in the middle of the trees or you're in the middle of the background.

[00:05:43]
So by kind of reversing, clocking back the timeline by negative five seconds, it staggers. Especially because their timing is different for each one. They're staggered. And it also gives this appearance that you're walking into the middle of him walking. Not like he's standing on a street corner and then he's walking.

[00:06:05]
So sometimes in order to get this real life effect you have to randomize things just a little bit. Great.
>> Sarah: Okay, here's another sprite technique and this one is like a really, really fun one. Because basically, what you're doing like, let's say I want take, do like a modern day book of Kels.

[00:06:23]
Do you guys know what book of Kels is? It's like in these old illuminated manuscripts back in Ireland, they would take the first initial letter. And they would do these crazy, beautiful, fancy drawings or whatever. So I thought, what would it be like if we had an initial letter for a blog, or something like that?

[00:06:43]
So you could imagine that maybe on desktop, it had a lot of fidelity and stuff. But maybe on tablet, it would be a little different. We pull some of the details off on the building, so on and so forth. And then on mobile it would be kind of simpler view.

[00:06:59]
Sort of like what we saw before from the other sprite. But if you think about the way that when you saw that original sprite, there's a lot of repetition going on, right? We're actually communicating a lot of stuff between these. Like this one's not so different from this one.

[00:07:17]
That's a lot of stuff that we're repeating. So, what would happen if I just kinda conditionally showed some pieces? Well, I could make this one and this one be basically the same and decide to show some pieces and remove some pieces on that view, using the media query.

[00:07:36]
I could also change the background of this using a media query and the size of the SVG will stay consistent either way. The mobile view is so different that we're just gonna leave that as is, but basically what we end up with is an SVG sprite that looks like this, it's about the same size.

[00:07:54]
And we're gonna just make the view box this, and then switch the view box at a certain point in time with some JavaScript. So what we get is something like this. I'm gonna open this up in another window. Got to get out of full screen here. So we can go like this and it changes and then it changes all the way down.

[00:08:20]
>> Sarah: And it's animated the whole way through and it nicely adjusts to whatever view port I'm using it at. Now that whole SVG and animation was 8 kilobytes gzipped. That's awesome, like think about a PNG to illustrate an article. Usually when you're trying to illustrate a blog post or something and make it interesting you're communicating with like 180K or something like that.

[00:08:47]
This is way, way, way smaller and we're actually doing kinda fun and cool stuff with it. So the way that this is done is I'm basically grabbing in Illustrator, if you have something that's the same class or the same id again and again, it will call it star01, star02, as it outputs.

[00:09:09]
So I just quickly did a find and replace of IDs to classes and grabbed all the classes that are star, all the classes that are dot. And then I have it blinking, but again I have them blinking at different speeds and a negative delay to offset them so that they're not starting at the same point in time.

[00:09:28]
No width and height for the SVG itself. Instead we're gonna define it in CSS. This is using a float, I made this pen a while ago. You could use flexbox, you could use Grid, you could use whatever you want. We're using percentage here, we could do something else.

[00:09:43]
So we're gonna define a smaller view box. So the view box was originally zero zero, I think like 900 by 474. But I'm gonna crop it to here and say 490. And then I have some animation media queries, because I'm actually changing it from those big mountains to those smaller mountains on mobile, so I have to change.

[00:10:06]
They both have that same class on them, but I'm changing it up based on which one we're doing. And then I have a view box shift with JavaScript. You have to use JavaScript for this one because there's no way to target a view box in CSS. I think that there was a proposal probably by Jake Archibald to put it into the CSS spec, but I don't think it got very far, which is fine.

[00:10:30]
It's not that much code to just change it between the two. So we're just grabbing it, we're listening to a match media, and then we're changing it from one to the other.