Animating with CSS


Icon Design with Sketch


Lesson Info

Animating with CSS

So we've designed two of our own icons. We've built them in Sketch. We've learned all about SVG. We now understand what types of animations are available and kind of a little bit about how to design an animation. Let's start building an animating icon. Let's dive into the CSS. So we're going to open up a cleaned-up version of the Color Swatches SVG. And what I did here is I created a group for the back-panel, a group for the mid-panel, and a group for the top-panel. And I just added a little bit of space in between these so that it's a little bit easier to read them. Otherwise, it's just the same SVG that we were working with and cleaning up prior to this. So I'll copy this. And let's open up a new CodePen. We'll paste this in as as HTML. And you'll notice the icon is over, off to the side a little bit. And that's because I went back into Sketch and increased the width of the artboard so that we can rotate these panels back the other way without them being clipped outside of the SVG vi...

ewBox. That's something that can get really frustrating. You're starting to work on an animation, and then all of a sudden you need more space because it's getting cropped out by the SVG box. And so it's always great to start with a larger viewBox than you may even need. So let's come in here and one thing that I like to do just off the bat is create this declaration to increase the size while we're working. Maybe just four times. And then we need to change the transform-origin to the top left. Now, what the transform-origin does is that's saying the point at which you are scaling from. It's a little bit like the point at which we rotate around. That's the transform-origin. So it affects both scaling and rotation. And in this case, we wanted to scale our SVG from the top left corner instead of from the center. One thing that we can also do here to make a little bit more friendly to work with CSS is change these ids to classes. And I'm just holding down the Command key and selecting these all at once and changing them to say class. And it's just generally a good idea to work with classes instead of ids in CSS. This is one of my favorite features. You can hold down the Option key and just click-and-drag anywhere you want and form a selection. All right, we've already got that one class as pin. Class back-panel, mid-panel. Looks good. The first thing we should do is reapply those rotations that we have on the mid- and the back-panels. So we'll select the mid-panel. And we're gonna do transform: rotate. And that was rotated 27 degrees. And you have to write D-E-G with CSS transforms. That is not what we're expecting it to look like. (laughs) So what's going on here? Well, SVG has its own coordinate system. And it's kind of a little bit bigger topic than we're gonna cover in this class. But instead of creating a transform-origin at the center of an element, it creates it at the very top left corner of the SVG viewBox, like of the actual SVG box. And in this case, we're rotating it 27 degrees around that point, and that's not at all what we want. So let's change the transform-origin to center. There we go. And that's what we're looking for. And it's in the center because we've got that transform hack, we've got that invisible extension of the panel that's swinging below, kind of invisibly. Now, I do have to take a second to pause. Because the transform-origin is a really finicky CSS property when it comes to SVG objects. In fact, up until recently, Firefox didn't support a whole bunch of this on SVG elements. They work just fine on HTML elements. But one way to get better browser support is to use a pixel origin instead of either shortcuts. So, like center and center, these are essentially saying like 50% in from the element, 50% in from the element. So how do we figure out what's the pixel coordinate for that transform-origin? Well, let's just jump back into Sketch. And it's as easy as, let's see, we've got a viewBox here of, how big did we make it, 97? Great. And so we wanna find what the coordinate is for that specific point right there. And we'll just hit the R key to add a rectangle. And let's see what that rectangle's coordinates are. 51, 50. 51 pixels. And 50 pixels. Great, so that didn't change the way things look at all, except that it did in other browsers and older browsers like Firefox, because that rotation was gonna get all wacky. All right, now let's copy this onto the back-panel. And instead, for that one, we wanna rotate it 53 degrees. So there we go. And actually, I think that when I created this cleaned-up version, the transform-origin was in a slightly different point. Let's see here. 48, 50. All right. So that is our center point. I got that center point in this same way in Sketch. And great. Now we can see that they're all coming together right around this same origin. Let's actually, since all of the panels are rotating around the same point, we can just create a CSS rule here that encapsulates all of them: top-panel, mid-panel, and back-panel. And copy that in there. It's a little bit more dry, a little less code to write. And let's see, we'll just save that as a Private Pen for now. Now, this is what we want the end state to look like. But we need to figure out what the beginning state looks like. So let's add a rotation to all of these panels of negative 50 degrees so they kind of rotate back. And this is how they're gonna start. But it wouldn't just make sense for them to start all together, fully visible. So we kind of want to fade the opacity out on all of them as well. So we'll bring the opacity down to zero. And the way that I like to just play around with this stuff, and we could fix that pin, the opacity on that pin, as well. The way that I like to play around with this stuff really quickly is just to create a hover state on the SVG. And then see how that looks. It's just a really quick way to get a sense of what the animation looks like. Let's add a transition property, just one second. And let's see what it looks like when we bring the opacity to one. Great. And when we have our mid-panel and our back-panel, we'll want these to also be on a hover state so that they arrive at that final point. It's looking pretty good. Now, our top-panel isn't doing anything, because we haven't declared what its final state should look like. So let's just do that right now. Top-panel, zero degrees. That's a little better. But you see, when these are coming in, you can see other panels beneath the other panels. So they're kind of semi-transparent. And that's not what we want. What we want is to actually fade the opacity of all of them as a group. And a really quick way to do this is to just bring the opacity on the whole SVG. Or you could create a group for those elements. Bring the opacity of all of them together to zero. We'll add that transition, one second. And let's see. In this case, we don't really care about those panels not being hidden. So there we go. And now each panel isn't semi-transparent. It's more that the whole group of them fades in with that opacity. Now, this is looking pretty good. But the motion is coming in and it's easing out. It's not as organic as I think we could make it look. And what we're about to go over is called timing functions. It's like, does something ease in and ease out? Or does it ramp up really quickly and then ease out, or slowly come in and then ramp up? And you can create custom curves for this. There's a great tool called And you can create these and preview them here. And see, this is going to be a real ease in, ease out. And I've got one here. I'm just gonna actually just copy these values. And the way that you use them is you just go to a transition property, and you can add cubic-bezier, and then paste in those four values. Those four values are Bezier curve one, two, three, four for that easing function, for the timing function. So now let's take a look at this. So they kind of bounce a bit. That's a little bit more natural. And it just makes them a little bit more playful. Maybe .6 seconds. .8 seconds. And you can have a lot of fun with this. You can create all sorts of crazy timing functions. There is a bug in older versions of Safari that will just have you use a basic easing timing function. And that's fine. Let me just copy this. Let's see how this timing function looks. Cool. It's a lot of fun. And that's really all there is to it if you want an icon animating with a very clear beginning and end. You can just use a CSS transition. Now, you probably wouldn't use it on CSS hover. What you'd probably do is add a little JavaScript so that when a certain event happens, maybe you arrive at a certain place in the page, a class is added to the SVG. And then based on that class, instead of svg:hover, you say svg.reveal, if you were using a reveal class. And it's gonna work exactly the same way. So that's a really basic example of using CSS to modify an SVG icon. And what, we kind of just have to take a step back for a second and think, you could never do this with PNG graphics. You could never do this before. You'd have to render out a movie. And it would take, the file size would be huge. This is an icon that's completely editable. It's completely vector-based. And it weighs like a few kilobytes in size. I mean, it's just, I find this stuff really exciting. (laughs) So let's get started on our whale icon. I've got our SVG on our desktop. And real quick, let's look at Sketch. Because I've done a few things before we started this section to prepare our whale to be a little bit easier to animate. So one thing that I did is I removed all of these groups. I named all of the layers. I removed these really cool-looking spray. Dash Offset, Dash Gap, we're actually gonna use that to animate it with the line drawing effect. I think this is really cool with a static icon. But it's just not necessary the way we're going to be creating it in CSS when it starts animating. Another thing you'll remember is that having any rotations like we had on the flipper, we kind of want to just take a note of what those rotations were, and we'll rebuild them later in CSS. So for example, this tail, bring it back to 30. And we'll add that 30-degree rotation later in CSS. I've also taken the time to make this about as pixel-accurate as it can be so that it's gonna look really crisp. And you'll notice I added a nice little mouth and little smile layer, and just kind of fine-tuned a few things. But basically, that's what we created before. So let's open up the whale icon and just take a look. So I've put the entire whale in a container, in a group container. And what I've done, this is actually kind of a neat little trick, I've added a stroke, and a stroke-linecap, and a stroke-linejoin property to this group. And as a result of adding it to the group, I don't need to add those attributes to every single individual element. Because most of those elements have the same stroke color. They all end in a rounded stroke-linecap. And the linejoins should all be round as well. I also set the fill to none. And again, that's just setting a default. If there are any layers, such as the eye, here, the pupil and the eye, we're using a fill for that, that's just gonna override what we had set on the parent group. So I've broken this down. We've got our flipper, our eye. We've also got our Main Body. And I've broken this down into several pieces. So we see here we've got the left top body, the right top body. And that's so that we can kind of animate these independently, especially for the tail movement and all seven of these sprays. So it looks like a lot of markup. But as soon as you start working with it, it's really pretty manageable. So let's copy this into CodePen. And we'll add our little enlarging declaration here. Top left. So this is a far more complex example. And one of the things that makes it more complex is that we've got more things to animate, more elements involved. And the other thing is that it's looping. And so we can't just create the animation the same way we did just now with the color swatches, which was with transitions. Clear beginning state, clear end state, CSS just adds a transition in between those for us, and it looks really nice. In this case, it needs to animate, and the beginning needs to look the same as the end, and it'll be more continuous. But that means we're actually using animation properties. So before we even get into using animations, I like to build this using transitions. It's just easier, and it's easier to get a sense of where things need to be moving. So to start off with, I like to kind of outline what the sequence needs to look like. All right, so first we want the whole whale, oh, let's save this. Great. So first we want the whole whale to move down. So the whale is gonna kind of move up and down. We're gonna have, at one point, the spray come out. We want the flipper to be kind of flapping the whole time. We want the tail to be flapping the whole time. And the eye, or the pupil in the eye, we want it to kind of be rotating around the eye, looking at whatever's going on. So when he gets really excited and starts flapping his flipper really quickly, the eye should be looking down. And then when he does the spray, he should be looking up. So let's just figure out the order that all of that needs to happen. So first of all, kind of continuously, the tail is going to be flapping. Difficult to type and talk at the same time. Next we want the whale to move down. This is like the first keyframe, really, that we adding in our animation. We want him to move down first really low. And then his eye, and then he's gonna bring his eye down, because he's like, why did I just get so low? Eye looks down at the flipper. Because then the flipper is gonna start becoming hyperactive to kind of move him back up. You kind of have to write a little story, basically. I'm not just crazy. This character has a personality and a story, and you have to kind of think about how it unfolds. So he looks down at the flipper. And then he shakes his flipper, quickly. Then, as a result of moving the flipper, he moves up. As he moves up, the eye moves upward, or rather looks upward. And just as his eye moves up, he starts spraying from the blowhole. So I'll say sprays. And then he moves down a little bit. Maybe even he sprays, and that kind of pushes him down a little bit. So just not quite as low as we got at the beginning, but moves down a little. Then he kind of resumes just his normal swimming pattern. So the eye looks forward. And we have to start it in the same way that we, or we have to end it in the same way that we started it. So we need to move him back up to the starting point. Moves back up to starting point. So having this to reference while we're creating our animations is going to be tremendously useful. Otherwise you can get so immersed in just typing in numbers and values, it's really easy to just get lost in it. So like I said, we're first gonna start using transitions for this. Let's start by animating the tail. So remember that skew, two-dimensional transform that we talked about? We're actually gonna use that on the tail to kind of skew it a way where it makes it seem like the tail is more three-dimensional. Sure, we could use a three-dimensional transform. But in this case, the tail is at such an angle that the lines would become so thin. And I think a skew's actually gonna give us a better result. So the first thing we need to do is actually just rotate it back into place. So we need to add a transform here, rotate. And we rotated it 30 degrees. Again, it goes crazy. Because it's using the CSS coordinate system. We'll just bring this back to transform-origin: center. And I'll go back later and create pixel-based transform-origins for all of these. You can find them in the CodePen, in the Resources section. But for now, we're just going to use these keywords because Safari supports them. So now we've rotated our tail. After we rotate it, we want to skew it. And we're going to skew it by about 15 degrees. And it's really important that the skew takes place after the rotate. Let's see, 15 degrees. But by default, that's just going to skew it in the X direction, and we actually wanna skew it in the Y direction, kind of like so. So there we go. So zero degrees, that's what it looks like by default. 15 degrees. Maybe negative 15 degrees. Yeah, that's looking pretty good. Now let's do that same technique of adding a hover on the SVG element, and then our tail, and just see if we can get some kind of realistic motion in the tail. Actually, before we do, we need to add a transition property. So let's create just kind of a group of elements that we need the transition property on. Transition, one second. And that's gonna transition all CSS properties. So then we can copy this and change skewY to zero degrees when we hover over it. Okay. We could go for something a little bit stronger. So maybe we actually go back in the other direction 20 degrees. That's looking pretty good. Obviously, we're gonna have to move it in addition to it. And we're gonna have to translate it. So let's add those translates right now. I'm actually gonna add them before the skew so they don't really mess with that weird skew transformation. And I've already figured out these values ahead of time. Because trust me when I say, figuring out exactly every single little value and just doing character animation like this, it can take many, many hours. It can take days. I've worked on icons that have taken days. (laughs) In this case, we figured out the nitty gritty. And we want negative three pixels. And that's going to move it negative three pixels in the X direction. So for you, that's moving left. Negative is left in the X direction. And negative is moving up in the Y direction. And then we're gonna move it 2.5 pixels down. And let's translate it over here as well. .8 pixels. And negative 4.3 pixels. So again, negative is bringing it up in this case on the Y-axis. So that'll give us some good motion. Now we need to move the rest of the body to kind of align with where the tail is moving. So let's create a... Let's add our body. Let's see, what's the class on this? Whale, we've got Main Body. We want body-top-left. Okay, that's the class, body-top-left. For the body, we can really just rotate it. Although, for the top part of the body, I've also found that kind of shrinking it in just one direction with a scale transformation also really helps so that we don't get that overlap between the tail and the body. So we're gonna add a transformation and rotate this negative three degrees. Anything more than negative three degrees, and we've got to set the transform-origin. And in this case, we're actually setting the transform-origin to where these two connect, which is the top right corner, so top right. And I've found that anything more than three degrees and it's pretty noticeable. Like, if we work this up, it starts to, the top of his body starts to look like a hinge, which is basically what we're doing. But we can get away with a few degrees here. And in the hover state, let's add that, svg:hover. In this case, we'll rotate it the other way. So by two, about 2 1/2 degrees. And I mentioned that we wanna scale it in the X direction. So scaleX. And we want this to be about 92% of what it was. All right. So let's do the lower part of the body as well. I'll just kind of copy these to be a little quicker. Lower left, lower left. In this case, we want it to also start as like negative three degrees. It's jumping because we haven't added the body-lower-left to our transition rule. Great, so you can start to see, even right now, that the tail's starting to come to life. Isn't that fun? You know, I kind of have these moments where you're just really into the code, and then all of the sudden you look at the result, and you start laughing and it's like, okay, that's when you're on the right track. So for this one, we don't need to scale it. And we're just going to do five degrees in that final state. And actually, you see that this isn't working quite well. I misspoke in that we want the rotate to happen after everything. And I also think that a little bit more rotation at the top here would look good. So let's do maybe 36 degrees and 28 degrees. So let's see how this looks. Great, that's coming together a lot better. So now let's work on the eye. The eye is actually going to just be rotating, basically, around this circle. And we want the origin of the eye to be, or of the pupil to be in its center, vertically, and off to the left. So let's add the pupil element here. And we'll set the transform-origin to center left. And the nice thing about using these keywords is that it doesn't really matter, the order in which you use them, whether you're talking X or Y first. But when you type in exact coordinates in pixels, you do need to make sure that you're doing the X coordinate first, and then the Y coordinate. So now we can basically just rotate the eye, say, oops, it's not just rotate, it's the transform rotate. Rotate is the function on the transform property. So we can rotate this like, I don't know, 40 degrees. And we see it starts moving. We'll add pupil down here to the transitions. And let's add a hover for the pupil. And just to kind of see this working, let's maybe bring it back up to like 90 degrees. You see, isn't that cute? And it's like, it's not perfect motion, it's not perfectly realistic motion, but it's realistic enough that you totally, it looks like an eye, it behaves like an eye. Eyes don't just jump from one place to the another. They kind of have more of a fluid motion. And a rotate has a very fluid motion to it. It's also kind of easing, because there's, by default on CSS transitions, there's an ease timing function. We can override that on the next part. When we start getting into the animation property, we will be using custom timing functions. But it's a really great way to make your motion a little bit more organic, is to make sure that you're using an ease. So now that we've got our eye, and you know, if it helps you, you can just kind of comment out little things. Just like, this is the eye. This is all of the motion required for the tail. And the larger that your projects get, the more you really need to kind of organize them in this nice way. Now let's work on the flipper. So the flipper, we're also, kind of like the tail, we're trying to get this motion that looks three-dimensional. And again, CSS does have three-dimensional transformations. I've used them on the flipper, and what I've found is that, actually, the motion didn't look quite as organic and quite as, just didn't look quite as clean as when I simply squashed it up and down. So that's what we're gonna do. We're gonna scale it in the Y direction. Before we do that, though, we need to kind of rotate it back. Because we had that rotated by about negative 20 degrees in Sketch. And now, so we need to redo that. So transform-origin, for this one, I'm setting it to about 80% of the way over in the, or 80% of the way over in the X direction and 0% in the Y direction, which is to say the top. And transform: rotate. And we want negative 20 degrees. Great, so now we're kind of back to where we had that flipper originally in our design in Sketch. And this is kind of the final state of it. This is the lowest state of the flipper. And we need to kind of create the state when it's up. So let's add another svg:hover for our flipper. Let's make sure our flipper is added to our transition rule. And we're gonna wanna make sure that we keep the rotation on there, and we're building on top of that, and then scaling in the Y direction, again, vertically. Let's do like .7. So that looks pretty good. But one thing you'll notice is that, because we're shrinking the outline, the outline is actually becoming a little bit thinner. It's becoming more faint. And it's not an issue at all when you're looking at it at like, what are we, like four times scale? But it's really important, again, to see things at the final scale. And that's just getting a little bit too thin. Those pixels just aren't quite as clear as I think they should be. So, fortunately, SVG has the stroke-width attribute, which is also a CSS property. Or rather, it's an SVG attribute that is editable in CSS. And we can add that in here. So we could say stroke-width. And currently it's set to one. Here, let's make sure this a little bit bigger so we can see it again. Stroke-width, instead of being one, let's do like 1.3. So now the width is actually, here, we'll hide the transformation for a second. So you can see that the width is growing as we hover over it. And it's pretty subtle, but it's just enough to make sure that that flipper is going to always be really crisp at the small sizes. All right, we've come to the point where a bunch of this animating except for the spray. And how does the spray work? So this is kind of an interesting one. We're going to use that line drawing technique. And there's so many ways you can make a line drawing look. And the way we're going to do it is it's actually going to draw on each of the spray strokes, or spray paths, and then it's go kind of undraw in that same direction. And somebody figured out a really useful way of doing this in CSS for SVGs. And that's using that Stroke Gap and that Stroke Dash thing that we were playing around with in Sketch. Well, those are called, it's called stroke-dasharray. That's the CSS property. And that's just a fancy word for, how long is the dash? So if it's just one pixel, there's a lot of little dashes. And then the other property we're gonna play around with is the Offset. So if you get a dashed line, you can kind of move the dashes along that line. And if you create a dash that's long enough, as in, as long as the actual path itself, then you can kind of move it along that line, and the gap is going to come up and make it seem like it's drawing in or out. It's really cool, so we'll show it. And there are a lot of articles about this online. So first, let's take the spray-1. And let's see. The first step that we have to do, so spray-1, I numbered these going kind of clockwise from this left lower one and around. What we to do in order to create this line drawing effect is we need to know exactly how long that path is. And Sketch doesn't tell us that. There's really no way other than to use a little bit of JavaScript to figure it out. So I've got this, thanks, Sublime Text. I've got this a little bit of code here. And I'm gonna paste it into JavaScript. What that does is it looks at the length of spray-1 here, I've set it to. But we can change this. And then it's going to log to the Console what that length is. This is using the getTotalLength function that's part of SVG. And I kind of promised myself that I wouldn't get into JavaScript with this class. Because it can really get out of hand. And not everyone's comfortable in JavaScript. I am not a master in JavaScript. And yet, this is a really important place to use it. So CodePen just added this little Console. And you can see, oh, it just told us how long that line is. And we can change this to spray 2, see how long that one is. And spray 3. And so this is actually the length in pixels of those paths. Pretty cool. So we do this for all of them. And we get these values. It's really helpful to have them in our Console here. And then we can kind of comment out the JavaScript now that we've got the values. So how this is gonna work is first we need to set the stroke-dasharray property. And we're going to set that to the length of the path. Now, if you're like me, you're just like, why on Earth do we need such a long string of decimals? You kind of don't. I'll go out to about four decimal places, and then I'll round it up. All right, so stroke-dasharray there. And then that is creating a stroke that is just as long as the length of the path. And then we create stroke-dashoffset. These are like such technical terms, but the concept of what it's doing is actually pretty straightforward. Now, stroke-dashoffset is, if we just set this to the same value, and then we created our svg:hover, let's do spray-1, and we set the stroke-dashoffset to zero. Oh, and we need to add spray- to our transitions rule. It looks like it's drawing on. How cool is that? But in this case, we want it to draw on and then continue drawing off. So what we're actually going to do is take the length of this and multiply it by three so as just to say we want three sections of this dashed line. We've got a section where you're seeing the line, then a big, big gap that's just as long, and then another section where you're seeing the line. And so we're gonna multiply this by three. Times three. And all right, 58.7127. 58.7127. And I also think it's a really good idea to round this up so that, all right. Instead of zero here, we're just going to use the length of the line. So it kind of comes in, and then it comes out. And now we have to do that for all seven sprays. So we're gonna copy and paste in the rest of them. I've already done this with several values here. And we'll paste these in. And we just need to add the remaining sprays to our transition here. One. Two. Three. Four. Five. Six. Seven. So there they go, all at once. And don't those curls just look so cool? And now we need to take this from a place where it has a clear beginning and end point into a looping animation. And what we're gonna do is, so that can take a long time to create keyframes for each of these elements. We're gonna walk through creating keyframes for one or two of the elements, and then I'm going to pull in the exact values that I've already found look really great. So the first thing that I like to do is let's call this, oops, not Fish, Whale and Transitions. Because it's a good idea to keep this safe if we ever need to revert back to it. So let's Fork this CodePen. And make this one Whale Animation. We don't need to see the Console anymore. So we're gonna keep this sequence up. But the first thing we're going to do is remove these transitions, because we're gonna be using animations instead. And at the very bottom, let's write our first set of keyframes. This is gonna be for the whale moving up and down. Because what I've found is that the movement of the whale as a whole really is, it kind of defines when each other thing happens. When he gets really low, he starts flapping. When he gets really high, he sprays. And we can also tell where the eyes should be based on those events. So we write @keyframes. Oh, and actually, just a quick note, if you are not on a really recent browser, some of these CSS properties might need to be vendor prefixed. What I'm using right now is the Autoprefixer library so that it kind of does that for more, and it's a little bit faster to write it in CodePen. So keyframes, let's just say whale-movement. And here's what we're going to do. We're gonna say at 0%, the whale should be transform: translate. So remember, again, translate is moving it. So it should be at zero to begin with. And then at around 10, no, how about 30% of the way through the animation, and this is always going to be relative to how long we set the duration later. So 30%, we want this to go down 10 pixels. Again, a positive value's gonna bring the whale down. And then at 60%, the whale moves back up again. At 80%, he moves down just a little bit. So I'll say like four pixels. And at 100%, he returns to the starting point. And it's really important when you're creating a looping animation, again, that the starting point is the same as the end point. So now that we've got these keyframes, let's add them onto the whale. I'll scroll to top, and let's add a whale rule. And we'll give it animation, the animation property. And we've gotta use the name of our animation. So whale-movement. And give it a duration. So I'm gonna choose 12 seconds. And oh. So you notice how it's going back and forth horizontally, that's because we didn't set this to translateY. We only wanna translate it this much in the Y direction. Let's try that again. There we go. Now he drops down. And I find that getting the duration and the movement correct for these kind of master elements is really helpful so that you don't need to do a lot of guesswork with the smaller elements. Now, for the pupil in the eye, that's gonna really base of off these keyframes. So we can say, all right, when he's at 30% down low, his eye should be down. And at 80%, or rather, actually at 60%, that's when he's up at the top, that's when his eye should be looking up, and he sprays. And so let's copy some of the other keyframes that I created ahead of time. So here is the eye direction. And you see that a lot of these keyframes, like 60% here, they kind of overlap, because I'm referencing the others. And let's just copy this animation onto the pupil. And see, now it's animating all together. He kind of looks up really quickly. You also see that, in addition to the name of the animation and the duration, I've added infinite so that it keeps going, so that it loops. We'll have to do this here as well for the whale, infinite. And I've added this cubic-bezier timing function so that it really eases in, and then it really eases out. Great, so now let's take a look at the flipper. The flipper's an interesting one. And I've gotta tell you, I've used a little shortcut here. And I really encourage you to do the same. Every movement of the flipper is woo-woo, woo-woo, those are all keyframes, up, down. And so across this 12-second animation, you've got a lot of keyframes. And these are, you know, we're changing both the stroke-width and the transform properties for each of those keyframes, and it just takes up so much space. So this is where I actually use a CSS Preprocessor like LESS. It has this feature called Mixins. And other preprocessors like SASS have this as well. You can create variables and Mixins. So here, when I declare what flipper-up should mean, I can kind of reference just flipper-up a little bit later, and it's gonna paste in all of these values. So that allows me to create keyframes that look like this. Flipper-up, flipper-down, flipper-little-up, flipper-down. And you know, finding the space between these percentages, it's just trial and error. You just kind of, and you say, okay, well, 2% in between them is feeling a little too short, let's try 3%. I've done the grunt work for us here. And so now let's add this flipper animation as a property onto the flipper element. So now he goes down. He gets really excited, so he starts flapping. He looks up to the top, and then he slows down a little bit. And like I said, this is character animation, and it takes a lot of time. We're breezing through it because I want you to know how to technically acheive this. But the actual process can take a lot, lot longer. All right, let's copy the sprays over, too. Because all I've done is take those same dashoffsets and dasharrays, and I've added them into some keyframes. Let's actually, real quick, go to there. So now we've got our keyframes in. One thing that I do wanna note is not all of these keyframes start at the same point. Some take a little bit longer. And kind of offsetting the way that these sprays come out, or time and the duration that these sprays come out, makes it just feel more organic. And now we'll copy over some of these very repetitive CSS rules. And getting rid of the hover. This is about all we're doing. I've also added one little thing to the top that just adds the same duration and the same iteration count, infinite, and the same timing function to all of these. So there we go. He drops down really low. He gets excited. And then he comes up. And there we have it. There's out looping animation. Like I said, this can take a lot of time to get right. But technically, in CSS, it's pretty straightforward. It's keyframes, and it's basic transformations.

Class Description

Learn the fundamentals of icon design, and how to create icons in the software program Sketch. You'll also learn how animation can enhance your icons, and see how it's done with a little bit of code. Peter will cover the basic principles of icon design and show you his process. He'll guide you step-by-step as he works in Sketch to execute icons. He also explains what SVG files are and when to use them. Peter will show you the benefits of adding animation to icons with CSS code, and tips for adding unexpected movement to your graphics. 

Software Used: Sketch 2016


Michael Oeser

I don´t take online courses very often but this time I was courious how it will be and how knowledge would be transferred. It was great, really. Peter is an awesome presenter who is able to share and show his knowledge in a very pleasant and professional way. Great course for everybody interested in icon design with a focus on animation. For me personally I would like to see a course with a deeper focus on the design principles and techniques of icon design because I´m not so much interested in animation. But anyway great course.


Peter great job teaching Icon Design! I have no background in making icons but was interested in learning how it was done. I had know intention of using this course in my web/app design but now that i've started watching your easy to follow lessons I realized that I want to make my own icons and highly recommend this course to anyone that wants to take their skills to the next level! Worth buying this course to review many times as there is so much covered that you wish it was available sooner! Thank you Creative Live!

Aris K

I stumbled upon this course after searching for more of Peter’s excellent tutorials. This beginner course will give you an overview of the icon design process starting with a useful icon design theory and considerations. The course then proceeds with two hands on examples that the viewer can also design while watching the tutorials. The first design uses basic geometric shapes the second is a "freehand" drawing using bezier curves. (TIP: read Peter's "Mastering the Bézier Curve in Sketch" free tutorial on beforehand). The second part is an overview of exporting SVG graphics and animating them with CSS. Personally, I would have liked more tutorials on icon design within Sketch and less about SVG , CSS. All in all, I enjoyed this course and would recommend it to anyone looking for a hands-on introductory course in icon design.