Animation Fundamentals

[00:00:00]
>> All right, so the first thing that we're gonna be talking about are animation fundamentals. These are all the building blocks we need to actually get started with animations. And so the first question is why animate? And so there's two main reasons for that. The first is guidance and clarification.

[00:00:17]
And just like we talked about before, we want to use animation for a purpose. We want to guide the user to doing things and to seeing where things come from. And I'm gonna be talking about this a lot, but seeing how one state transitions to another state. And so this is really important, especially if you're used to mobile phones.

[00:00:39]
You have these motion design idioms on your phone where when you click something, it might expand, it might slide to the left, or slide to the right. And that's not meant to be flashy, it's meant to inform the user, again, what could happen and what did happen. The other thing, the other reason for why we animate is first dial in branding.

[00:01:01]
So just like your website or your web application might have a palette of colors, different fonts and font sizes that are used throughout the app in different spacing primitives, there is also animation primitives as well. So that's why when it comes to style and branding, having a consistent fill for animation is really, really important.

[00:01:24]
So you want to be able to choose your durations, choose your timing functions, and choose the kinds of animations that you're doing in a consistent way so that your app feels cohesive. And also so that it gives the user trust that they know when they're in that app and they can expect things to basically work the same and feel the same.

[00:01:48]
So the first fundamental that we're gonna be talking about is duration. Now when we talk about animation or transition duration, this is how long an iteration of an animation takes to complete. Now I put iteration in there because some animations can actually be infinite. Like, for example, if you're loading a site and it takes a really, really long time, it might feel like that spinner is going on forever, and ever, and ever.

[00:02:14]
So what is the duration of that? Well, the total duration might be infinity, it might not be, but I've seen websites where it will literally not stop loading and you're not sure whether there's an error or not. And, I mean, to fix that problem, I have other workshops on state machines where you could sort of avoid that issue.

[00:02:32]
But when we're talking about duration, we're talking about how long one iteration of that animation takes. So, taking the spinner as an example, we could say that the spinner takes one second or maybe half a second to go one full rotation around. And so even though it might go on infinitely, the duration of it is just one second long.

[00:02:58]
There's also delay. And so a delay is how long it takes before an animation or a transition starts. So, when you click something, it might wait a little bit before actually doing something. And delays are actually really useful for orchestrating animations too. And we're going to get into that as well.

[00:03:20]
Delays might also present a little problem when you're doing orchestrated animations, because a delay only happens once. And so remember, delay is from the time before you start an animation. If your animation has many iterations, that delay is only going to apply to the first iteration. So that's something that's really important to keep in mind.

[00:03:45]
But delay is a very useful tool. The third thing is something that actually might be tricky. And so, I'd love to talk about this more in detail, but it's the timing function, also known as the easing of the animation. And so, this is how the animation feels, or how it accelerates and decelerates over time.

[00:04:10]
So if an animation takes one second long and you have a linear easing, which we're going to show in a minute, then that is going to have the same consistent speed from beginning to end. However, you could define the easing using cubic-bezier or a few CSS keywords, and that's actually going to help you define how an animation accelerates and decelerates at the end.

[00:04:40]
Now, the cubic-bezier syntax might seem really weird. There's four numbers, you're not sure what those numbers do. And it's actually a lot simpler than you might think. So the first two numbers, if you imagine this curve like this, we have two control points. We have the first control points, which is the control point for the start of our curve.

[00:05:02]
And the second control point is the control point for the end of our curve. So this 0.50, think of it as coordinates. We have x at 0.5, which is halfway through, and y at 0, so it's at the very bottom. Now for the next one, we have x at 0.5 again, and y at 1.

[00:05:23]
So it's going to be at the very top. And so, if you play the around with tools such as Figma or Adobe Illustrator, you might be used to this cubic-bezier thing and how the control points affect the shape of the cubic-bezier curve. So we could see here that, especially when compared to just a straight line, that was a terrible straight line, but you get the idea.

[00:05:52]
That this animation is actually gonna start a little bit slow and then it's gonna speed up in the middle and then it's going to slow down a little bit at the end. And that's really hard to read these cubic-beziers.