Step animations consists of moving one large animation sprite to show each “cell” of the animation. Removing the steps creates a rolling background effect. When multiple rolling background exists, Sarah demonstrates how staggering the durations can add a sense of depth to the scene.
(groovy music) - So we're gonna get into some SVG sprites. SVG sprites are really great for performance and there's a lot of really cool tricks you can play with CSS and SVG sprites, so all of the techniques that I'm showing you here are really designed to be as performant as possible and also have animation. If you've ever seen this technique from Joe Harrison on SVG icons, like a responsive SVG icon, you can basically make just a giant SVG and then designate for the view port just like you would with any other image sprite, a different part of the system.
The first thing that we're gonna do is actually we are going to animate a background url of an SVG even though I said you shouldn't do that, but we're not actually animating it, itself. We're just scrolling through that background. It's very close to stepping, step animation is very close to cell animation, like old animation techniques where you draw frame by frame. As we go further into this course, nobody's gonna be doing anything frame by frame, or drawing frame by frame, this is the only time I'm going to show you an example of how you can do that.
It's pretty close to old web animation techniques. You can kind of layer different parts of it based on the foreground, middle ground, background and then it's basically like, if you think about the old light boxes they have in the background that they set and then they have the kind of layers on top, they're called, cellulose. So this is three of 21 frames that I drew for a splash animation. For most animations, you're gonna wanna go as fast as possible, you're gonna definitely try to hit as many frames per second as you can.
With this technique, you're probably not gonna want to do that because you have to draw all of the frames. If we learn from the past, old cell animation was 24 frames per second and they did something that they called, shooting on twos, which was take two frames for every 24 frames. So it was actually 12 frames per second and that's what they found was the end part of what visually looked like an animation before it started to break apart, that's like as much as you can get away with.
For this pen, it's like a splash and I drew all of the things, every single point in this splash and I'm using a step animation to cycle through all of those. It's basically a giant animation sprite, I just have this large animation sprite and I'm move the background position. So it's negative 3,046 pixels, that's like as big as the SVG is and inside that SVG, I've designated a width and a height so that it's very stagnant, it's not moving around and scaling like the other ones.
And then we have our background and then I have my animation. One thing to keep into consideration when you're using CSS animations, you don't have to define the first keyframe, if it is the default value of that element. So you can keep your code nice and concise by only defining a 100% or a 50%, you don't have to also say the 0% value. I also have a fallback here, so it's falling back to a PNG for older browsers. I'm using Modernizr in this instance, to use a basically hook for that.
So I have on the body class, no SVG and then I'm able to use the PNG fallback. So that's a really nice thing with Modernizr that you can do. Like I said, fallback with Modernizr, they just came out with a new version, it's really awesome. Fallback to a PNG equivalent, I'll show you some automated ways to do that too. You can also fallback with the picture element in polyfill, Sara Soueidan has an article about that. I tend to think that with older browsers, for IE 8, I'm not gonna go through all of the picture element stuff and saving off all of those versions.
But that's also because I look at my analytics and my analytics are telling me that the people who are visiting my website, aren't on IE 8, there's just such a small percentage of them that I'm not gonna go through all that. But you should be looking at your analytics because if it is different and there are lots of people on IE 8, then you might need to do the picture fallback. Two ways to make this. One of them is Illustrator with a template, so if I go into Illustrator, you can do this in Sketch too, these are just the commands in Illustrator.
You basically can take the entire view box, like the whole screen area that you have in Illustrator and draw a rectangle across the whole thing and go to object, path, split into grid and it'll automatically set it to 24 frames for you. Then you can make them into guides. So that's like a really quick way to just have a template in two seconds and I strongly recommend it because drawing out all those guides is a pain.
Then you can draw, what I usually do is I'll draw the first part of it and put a box the size of my first guides inside of it and then copy both of them together, move them to the next one and then I know that that rectangle is exactly centering it inside that guide box. And then you just pull the little anchors out and change the drawing slightly, so really when you start off with that initial drawing, there's very little real drawing you're having to do, you're just like manipulating it and moving it around.
I wouldn't suggest redrawing it every single time, just like slowly move it and shape it as you're moving and it's a lot easier. You can also easily export to a PNG fallback, that's super simple. Works with Sketch also. Another way to make this is in an SVG editor with Grunticon, if you're not familiar with Grunticon, you should be, it's a really good thing. I'm not gonna get into icon sprites right now or anything, but it's a really nice tool for icon sprites. So you're gonna draw your drawing in an SVG editor, so like whichever one that you choose and you'd basically just keep the template the same, save off one by one, so the same kind of thing, you don't have to move anything, you're just like reshaping it, saving, reshaping it, saving, reshaping it, saving and then you can also draw on paper and scan if you're, I'm not as good at that part, so if you are better at that kind of thing and importing, then you should.
Use Grunticon, so when you're using Grunticon, it'll automatically condense it all and make a sprite for you, and then it also makes the fallback for you, so that's pretty simple. We're gonna take that last example, and if we don't designate the steps in that animation, if we're not telling it like, look at this frame by frame, it actually just starts to roll through the background, so we're gonna use that to our advantage. If you take the steps out, the background rolls through and then we can do things like, have these three ghostly background layers that where it's like kind of parallex or whatever you want to call it.
I am using a step animation for the walking but I'm not using it for the background. I'm doing kinda like a poor man's version of an animation for this step that you can't see it very well on the screen, but it's like red, orange and yellow, I'm just changing the color of it and then it animates the colors as it's going through. And basically, the way that this looks like when you're really zooming out and thinking about how the layers work, it's like the guy is on top and then they're all just z index, and by z index, you don't have to define that they're z index, just make sure that they're in the right stacking order in the dom.
I just extend to keep it dry, so like and you can do a mix in too, whatever you feel comfortable with, so you can have like the width and height of each one and then extend that area, so you're applying it very quickly to everything and know that it's consistent. And then again, you're trying to keep things as small amount of code that you can work with as possible, so at the bottom you have the keyframe background that's going to the background position of 200% so it stays till basically the end of that whole animation and then we have the background url and the only difference between all of these, is that they have a different amount of seconds for the animation.
So like the ones that are in the background are gonna go through slower than the ones in the foreground and you might notice that I have a negative delay for the start of it. Does anybody know why I would do that? - [Student] So that it's running when... - So that it's running when the viewer gets there, because it's like a tiny little trick. It's just so that there is not that moment of, wait, what's going on? Some animations that won't work with but for a rolling background, it starts in the middle and that's kind of nicer.
The only thing that I would say when you're designing a background like this, is you have to make sure that whatever background view you use, matches up on either side of the ends of it. So like, if it's scrolling through, if they're not exactly the same, it'll look like something weird happened in the middle there.
Note: This course was created by Frontend Masters. It was originally released on 2/19/2016. We're pleased to host this training in our library.
- Paths and groups
- Platonic shapes
- Optimization and CSS animations
- SVG sprites
- Atmospheric and elemental motion
- GreenSock workflow
- Staggering animations
- UI/UX animation vs. standalone
- DrawSVG and motion along a path
- Animating text and relative color values