Animation Easing

[00:00:00]
>> Just so that we could do a little bit of coding, we're going to animate this ball and see what some difference is instilled. So I'm going to go into the root of my directory, the style.scss. You can ignore this style.css, we don't need it, but we're going to be working on style.scss.

[00:00:22]
And so let's say that we want to actually animate this ball. And what we're gonna be talking about animations in a minute, but I'm just going to have animation slide-right. Don't worry if you don't know what this is. We're gonna have a go for one second, and we're gonna actually do a linear easing just to show you what that looks like.

[00:00:47]
And we're gonna have it go on infinite number of times. Cool, so we also need to find the keyframes for this slide-right from transform: translatex(0) to transform: translatex. Let's have it go halfway to the screen and back, so 50 viewport width. Okay, so now you can see that this ball is moving from left to right, but this animation feels really, really rigid.

[00:01:21]
And that's of course because it is a linear animation. So let's inspect this element if we could catch it. So it's a bad idea. [LAUGH] Let's pause this for a minute. We're going to, by the way, this V app hot reloads. So when we add this animation back, we should still have it selected over here.

[00:01:45]
Now, I'm gonna bump the font size up here too, so you can see everything. And so when you inspect this elements in the DevTools panel, whether you're using Firefox, Safari, or Chrome, you're going to notice that in the styles, or at least this is in Chrome. But we have this little open cubic Bezier editor symbol over here.

[00:02:08]
This is really useful, especially for when you're trying to learn about what do the difference easings actually do? So right now, this is linear. And so you could see that it's just maintaining the same speed from the beginning to the end of the animation. So if we click something like ease and out, which is a key word that you could use for the easing, you could see that it accelerates a little, and then it decelerates a little.

[00:02:37]
So we could play around with this. We could move it here, so we could show it accelerating a lot and then decelerating a little. Or we could do it the other way around. So we can move this to the left and we could see that it accelerates a little.

[00:02:53]
And then it's spending most of its animation decelerating a lot. So there's a plenty of other ones over here, and I recommend that you just try each one of these out. But again, it can seem random that we have all these numbers and no clear idea of what they mean.

[00:03:13]
But by dragging around these control points and seeing the animation live, then you should be able to get a pretty good idea of what the easing is doing. Now, my recommendation is, if we go back to the slides, is to always keep this number. So the y value, the first y value is 0, and the second y value, 1.

[00:03:42]
The reason that I recommend this is because it becomes a lot less confusing to figure out the other two numbers. Because when you do that, the other two numbers just become just like something that you could adjust, and you could pretty much describe most curves like this. So if I do this, I can have it pretty much accelerate all the way through, or really accelerate if I want to.

[00:04:09]
And so you don't have to really think about moving this up here or down there. The reason that I like having 0 and 1 as y values too is because it really models the real world. When something starts moving, it's going to start at a speed of zero.

[00:04:26]
And when something stops moving, you want it to, of course, stop at the speed of zero. So if your y values are different, then you're basically saying, hey, this isn't exactly starting and stopping at zero, it's starting and stopping from some speed. And personally, that feels a little bit unnatural.

[00:04:42]
So just to make things easy, have those y values be 0 and 1. Of course, you could do whatever you want there but, yeah. Question?
>> Yeah, do you tend to mix different easing types in a feature or use CSS variables or SAS variables to kinda keep that.

[00:05:02]
Or is there a benefit to kinda keeping that, if there's an arrow animation on the button and an arrow animation there, keep them both at the same easing for consistency? Or do you tend to just kinda each animation is kinda specific to what the animation is doing?
>> Yeah, so that's a really good question, and we are gonna be getting into CSS variables in just a minute.

[00:05:20]
But as far as using different easings, it is important that, if you can, define different easings for three types of movements animations. So there's entry, which is when an element comes into view. There's movements, where an element is moving from one place to another. And then there's exits, which, of course, is an element moving out of view.

[00:05:45]
Now, some animation principles that Google's motion design, I believe they're called, have talked about is that when you're doing an entry animation, or basically any animation, you want it to not be too slow. You want it to feel like something that's snappy, but of course not too snappy.

[00:06:07]
And so the general guidelines they have around this is between 200 and 500 milliseconds for an animation. Now, of course, this is up to you. You might have animations that are less time to that or longer than that. And you could also make animations feel longer or shorter, depending on how you do the easing.

[00:06:25]
But with that said, let's say that you're showing a modal, right? When a user clicks something and they want to see the modal, of course it's something big and on the screen. You don't want it to be too jarring. So you might want to have a little bit of a longer duration, and you might also want to adjust the easing, so that it might decelerate a little more.

[00:06:47]
So you can see that just coming into view and then slowly fully appearing. Now, when it comes to an exit animation, like you want the modal to disappear, one of the worst things I've seen on many websites actually is the modal takes its sweet time disappearing. It's like okay, goodbye, I guess I'll talk to you later.

[00:07:09]
It's like no, I'm clicking the x, because I really, really want you gone. And so in that case, you could either make it disappear instantaneously, or you could just make it disappear faster. So you could play around with the easing there and say, okay, I want this to really accelerate out of here.

[00:07:32]
So you could do something like that. And so basically just making it go away, because at this point, we really don't care about where it stops. This modal is supposed to disappear completely, so you could just play around with the easing and make it so it's like, okay, I'm rushing out of here.

[00:07:51]
And I'm not going to be annoying or disturbing the user. So yeah, in general, I would recommend different easings for those three types, entry, exit, and movement animations. And of course, you could play around with them and see how you like each one.