2.10 Sprite and Infinite Loop SVG Animation
Did you know CSS is capable of controlling frame-by-frame sprite animations? In this project, create a walking animation sprite, learn to recolor SVG images, and make a moving background that runs on infinite loop.
1.Introduction2 lessons, 05:01
2.The Projects10 lessons, 2:27:30
3.Conclusion1 lesson, 01:18
2.10 Sprite and Infinite Loop SVG Animation
Hi, and welcome to the final project in 10 CSS3 Branding and Presentation Projects. In this project, we're gonna be working with SVG. And we're gonna be creating a sprite animation. Now so far, you've already worked a fair bit with CSS animation. But we've mostly been working with just transitioning things from one spot to another. You also have the option with CSS animation to work with a frame-by-frame animated image. As well as that, we're gonna be making an infinitely looping background in our animation. And I'm gonna show you how you can use CSS to recolor inline SVG, in combination with the use element. To get started, fork this base pen into your Codepen account, and you'll find the link for it in the Related Links section below this video. If you've never worked with sprite animation before, this is how they work. Now, these are eight frames for a walk cycle of our little, animated guy here. What we want our CSS to do is show each one of these frames, one at a time in sequence, just like the frames in a reel of film. If we can get them showing one after the other, that will create our walking cycle. So let's add our littleguy into our scene, so in between the divs that you already have in your base pen at this HTML. So we're going to have our littleguy come up in this div here. And then after that, we're going to position him with the wrapping div that we have around it. And the sprite image I just showed you was an SVG image. And each one of its frames were 285px wide by 380px high. So we're gonna set our SVG image as a background, and we're gonna set the div to be 285px wide by 380px high. So that's brought the first frame of our little, animated guy into our scene. Right now, he's actually a bit too large, so we're gonna use transform to scale him down to half size. And that's the beauty of working with SVG. You can tweak the size of your display without losing any quality. Now we're gonna set up his walking animations, so that we can start to get that sprite animation coming through. So we're gonna set up, @keyframes walk. Now, whenever you wanna do this technique, you need to have a from beginning state, where you have a background-position of 0 by 0. And then you have a to background-position, where you put the width of your entire sprite image in here with a negative value. So what we're gonna make it do is gradually slide that wide image with all those animation frames from the right over to the left. So that each one of the frames will, one at a time, become visible inside this visible area that we have of 285 by 380. So let's say we call this animation in the same way that you've been using animation so far. We would just say animation, give the name, the time, and how many times we want that to repeat. And so there's our basic walk animation, but obviously that is not what we want. We have just got every image just sliding by, and that doesn't look like a walk cycle at all. So the key to sprite animations is using something called steps. Now, we know that we have eight frames in our walk animation. So we want each one of those frames to appear, step by step by step. So to make that happen, we're gonna add in, steps(8), to our animation. And there's our sprite animation. So, there's two parts to making this technique work. One, you need to have the full width of your sprite image entered here, with a negative value. And then two, you need to include steps with the number of frames that are in your sprite animation. Next, we're going to include this background image into our scene. This is a 650 pixel wide image that is set up so it can be tiled from left to right infinitely, to make an endless road with an endless footpath and endless fence. So we'll add that as the background for our scene class. And we'll tell it to repeat on the x-axis. All right, cool, so there's the background for our scene that will repeat itself as many times as it needs to. So now our littleguy is floating up in the air here. And we want him to be in the middle of the scene, walking on the foot path. So to get him into the right spot, we're going to start our .position_littleguy class. Here we go, so we've absolutely positioned him. We've set him 140 pixels from the bottom of the scene, and we've used calc to center him. So we've placed him halfway across the screen. And then we've subtracted half of his overall width, to make sure that he's properly centered. Now we're gonna set up an animation for that background, to make the background move in the way that you'd expect it to if our littleguy was walking along past this background. And we're gonna have that movement repeat infinitely. So we'll add in, keyframes move_background. And we're starting with a background position of 0 by 0, and then we're moving our background position by 650px. 650px is the width of our background image. So by moving it in that amount, it's going to make it look like it's seamlessly moving from left to right constantly. So now we'll deploy that animation on our scene class, and there we go. And now that gives the impression that our littleguy is walking down the street. So we've set the animation to run over six seconds. And we're having it just repeat itself infinitely. And you'll notice here that we're using transform: translateZ(0). Now this is just a little trick that you can do whenever you're working with a 2D animation, but you want to try to tap into the resources of a person's computer a bit more. By adding translateZ, that's one of the 3D transforms that you can work with in CSS. And that automatically will trigger GPU acceleration on most people's machines. So if you're working with animation, that's just something that you can do to get a bit better performance. Now we're gonna add some inline SVG to create some shops on the street. So we're adding this HTML. So we have a class named shops that we're wrapping our SVG with, and then we're using an inline SVG element. Now we're actually gonna add one shop image. That's the one that looks black right now on your screen. And then we're going to reuse that one SVG image six times, and we're gonna give it six different colors. Each one of these shops is 650px wide. Six times 650px is 3,900, so that's why you see here we have a view box that's 3900px wide. And we have the width set to 3900px as well. Now because we're gonna have six different shops that are identical in every way, except for color, we don't wanna have to load in six different types of SVG. We just want one, and then we wanna tint it in six different ways. So for that reason, what we've done is set up our shop image inside this element defs here, short for definitions. So we've defined our SVG shop, the image. And then to use it, we use this element here. So in our definitions, we have given the shop the id="shop" right here. And then in our use element, we have specified xlink:href="#shop" to say that this is the SVG that we want to place here. And then we have given it a unique id so that we can target it with CSS. Now, you might have seen before that you can use CSS to target SVG that has been loaded directly onto the page. But when you're placing the SVG with a use element, you can't use CSS in the same way. If I were just to say that, inside the id purple, set the fill color of this shop to purple, that wouldn't actually work. So to get around that, what we've done is set fill="currentColor" inside our SVG code. And what that's actually going to do is look up the current text color on the element that the SVG has been used inside of. All right, so let's make this shop purple, the one that's currently black. So against the id purple, we're setting the color to be purple. All right, so now let's move our shop into the right position. So we wanna have it 275px from the bottom of the scene. And now, let's also set up an animation so that it moves along with the rest of the stream. So we're gonna add in, @keyframes move_shop. And we're making this animation move our shop from a translateX value of 0, all the way up to 3900px, because that's the width of our entire scene. Now, we want this purple shop to keep recycling itself in the background. So we want it to go all the way from left to right of the scene. And then we want it to start over again, and come back through over and over, and over again. So now we'll activate that animation, add it into our purple id. There we go, now we've got the purple shop moving along with the street. And now eventually, that's gonna reach the end of its animation. And then it will show up again back at the beginning. And it will just look like the littleguy just keeps walking past purple shops. Now we're gonna add in the rest of our shops. So we've got another five shops to add in. But we're gonna shift one thing on our first purple shop. And that is, we don't want it to start on the screen. We want it to start off the screen. So we're gonna move this over, so that's it's starting x position is -650. And then we're gonna add in the rest of our shops, also with an x position of -650. Right now, you're not gonna see any of those new shops. Because they're all offscreen, and they don't have any animations applied to them. So we'll add in the styling for each of our five new shops. We're gonna set the color, so that each one of them is gonna be a different color. And we're gonna apply that move_shop animation, but we're gonna delay each one by six seconds longer than the one before it. So that way, each of the shops will come out one at a time. So there's our CSS. And now we have, purple shop comes out. Then, a red shop. Then after that, we have a green shop. And now we've got a bit of a streetscape. Our littleguy keeps walking down the street. And when we get all the way through, I'm just gonna fast-forward here a second. We come back to our purple shop. So that's just gonna keep infinitely looping over and over again. So that it looks like our littleguy is always walking down a street with a bunch of different shops in it. Now, the only problem that we have with our animation right now is if we refresh the page. When our littleguy first starts walking down the street, there's an empty streetscape. There's nothing there. So we're going to put a couple of shops in at that start of the street. But we're only going to have their animation run once. Cuz they only need to be there until our first six shops start looping again. So we're gonna add in a few more use elements. We're gonna have a blue shop, a lavender shop, and a yellow shop. And they're gonna be given fixed positions starting on the screen. And then we're gonna add coloring for those. And we're also still gonna use the move animation, but this time, we're only going to have it run once. So that's our coloring and our movement. So now, from the moment that the animation starts, we've got a full streetscape full of shops. Just save that, and we'll refresh it so you can see it from the beginning. So now there's shops on the screen at all times. Now, just a side note, you'll notice there's a little bit of lag on that load. That's just because I have these SVG images coming in from Dropbox. But when you have SVG coming in from a regular host. You won't notice any of that type of delay when you load up your animation scene. So that's how you create sprite animations using CSS, and how you create infinite loops. And that's also how you can color SVGs even when you're placing them with the use element. We would love to see your completed animation when you're finished. And especially if you do any of your own animations using the techniques that you've learned in this project, please tweet us through your pens to #10CSS3projects. In the final video for this course, we're gonna just go through and quickly recap everything that you've done throughout this course, and everything that you've learned. And then we'll also have a talk about what you can do next. I'll see you in the last lesson.