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.