What's Possible with Animation


Icon Design with Sketch


Lesson Info

What's Possible with Animation

So, we've learned all about Sketch, we've learned about SVG, we're almost ready to start animating our own icons. But first let's talk about what's possible with animation. What kind of animation's are there? There are pretty standard types of animation across any animation framework. And you know the easiest one is just opacity. So you wanna fade between two things. That's the easiest way to add a little bit of animation. Another type of animation that almost any animation framework is gonna allow you to do is two dimensional transforms. So these are things like, just moving something. In this case, these three icons kind of bounce up from the bottom, that's just what's called a translate. Translate means move, translate in the X direction in the Y direction. And we'll be using two dimensional transforms in CSS quite a bit. Another type of transform is scale. And you use, you know, opacity and scale together in some really cool ways. You can bounce them and and these are like really b...

asic, but you can achieve so much with them. Here's rotate. You're probably pretty familiar with these. Now one that you might not be familiar with so much, is skew. So, skew's an interesting one. Skew actually takes the top and the bottom and it kinds of shears them in a way, or takes either edge if you're going the X direction or the Y direction, and it shifts those two and it kind of distort them. And the way that it does that is it uses a, degree, so it's actually kind of, considering how much do I rotate this, this skew effect. It's really weird but, it is actually useful, especially if you wanted to give a box, that was animating, a little bit more kind of movement to it. Maybe a bit bouncy. It does have uses, we'll also be using it to kind of fake a 3D effect for our whale. Now you have three dimensional transformations. So this is in the Square Cash app, and I love that they've got this little icon. First of all, it's dynamic. So as soon as you start typing this in it recognizes that it's a VISA card and it changes the icon to a little VISA logo. And then when you begin typing in your CVV code, it flips around to show you where that CVV code is on your card. Very subtle, helpful, and that's a three dimensional transform. So that's actually rotating in the let me see, that's rotating in the Y direction. Now something that isn't in every animation framework is moving things along a non-linear path. And it's really easy to create, to animate a translate, animate a move, that just goes from A to B, but to move it along kind of a specific path. That's something that not many animation frameworks have. And a little bit later we'll get into what tools, what are some of the more advanced animation frameworks that allow for this. Another thing that you can do in more advanced animation frameworks is morphing. And that's where you actually take a shape and you modify the fundamental shape of the path, and this is also changing color, and it's got a nice little bounce effect to it. But it's the same shape and it's interpolating between a couple of different shapes. You also have line drawing. And you know in this case it's, you can animate the line drawing for something that is a closed icon. You can do some really cool things with line drawing. We're gonna be using that effect for the spray on our whale. So that it kind of draws in, and then draws out really quickly. Another type of animation that you can do is using clipping and masking. So using in this case, we have a rectangle, but it's only showing up within the circle. So, that circle is behaving like a clip path, that's the name of it, or a mask for the rectangle. You know, there is a slight difference between them, you know in Sketch, they only use the word mask, but really it's, normally a clip path. A clip path is, it's binary, it's all black and it's all white and so it's either within this circle, or it isn't. And it's really to use shapes for clip paths. For a mask, that's when it's, you can use things that are in between full black and full white. So you can create transparencies and that's a really advanced topic. But you can animate clip paths and masks, which it's another effect. I mean really when we were looking at these icons coming up, they come up from below, but instead of fading as they come up, they're just clipped at the bottom. You can animate just about anything using CSS or another animation framework. And some of the most basic ones are just animating the style. So colors, or other really basic stylistic effects. Then there's some advanced things, like filters and all sorts of custom effects, you know Photoshop has tons of those filters. SVG has the ability to, create filter elements that have some really complex distortions, and color, like hue rotate effects. You can do some really neat things with those. And distortions as well within SVG. We're not going to get into those, it's a really advanced topic, but it is possible and I encourage you to check it out. So these are the things to think about as we start animating our icon and trying to figure out. What do we want to animate? Is this whale going to come in from somewhere? How are the color panels going to build in, in an interesting way? So in the next section, we're really gonna dive into designing animation using these various types of animation we just discussed.

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 medium.com 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.