This course has been updated! We now recommend you take the CSS Animations and Transitions course.
Transcript from the "Timing Functions" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Rachel Nabors: Timing functions, now things are going to get exceedingly fun for us.
>> Rachel Nabors: So a falling ball picks up speed due to gravity and a rolling ball slows down from friction. These are natural physical ways that things around us respond to the laws of our universe. Now, easing is a way of showing those sorts of changes in the rates of change.
[00:00:33] It's also known as cushioning back in studio animation, they describe an animations rate of change over time. Let me show you a little bit about what this means. For instance deceleration is actually out. Ease out can be thought of as accel, ease in can be thought of as acceleration.
[00:00:53] That's what those words mean. I'll tell you a quick way to remembering them in a moment. Ease out, ease in these are two default CSS values. We also have one called linear. Linear describes a constant rate of change. In the wild, it's very rare to find anything with a constant rate of change that is not manmade.
[00:01:13] Pretty much everything is speeding up or slowing down. Even the universe is speeding up as it's all expanding from the center where the big bang occurred. So everything has the rate of change it's nothing is constant not even change. Man we're getting super zen today. Yes, there easy is not only the law of the universe but it is very zen.
[00:01:37] So yes we get ease-in we got ease-out into acceleration-acceleration we even get this thing called ease-in-out which basically goes starts and slowly speeds up in the middle. They can be hard to remember, but we also have steps, we're going to talk more about that when we cover CSS animations.
[00:01:55] So how do you remember which one of these is which? Well you can replace the word ease with the words slow. In fact, back in the early days of animation it wasn't called even easier cushioning it was called slowing. So easy in become slowing as it comes on stage slowly but it leaves quickly.
[00:02:13] It's inferred easy now goes out slowly. So it looks like it's decelerating going from fast to slow ease in, out, slow, going both in and out, must be going quicker in the middle. That's how I remember them. These are all very normal. Ease in, out, ease in, ease out, everybody is using these what if you wanna make something look unique like you.
[00:02:40] That's when you're going to use custom cubic bezier. Cubic bezier is another timing function. It lets you give the browser a set of values to say what you want that rate of change to be. Where do you want to speed up? Where you want to slow down? You can tell it this and you can make it yourself, that's the fun part.
[00:02:59] This is cubic-bezier.com and you can pull this is what a cubit busy curve looks like and as you can see as I mess with the little the little toggles here the little pools the number is changing up top. This is the value that we would be giving. We will give to the browser to tell it how we want change.
[00:03:21] Let's compare this linear rate of change down here in the blue box to the curve that we just made. The linear is going to be constant. Notice how stick straight it is. It's the same speed going across the browser whereas mine's got a little bit of a bounce.
[00:03:36] So let's see what other kinds of curves do. Here we do this you'll notice that it goes from very fast and then it slows down a little bit pretty awesome. And then we do this like so and this one should be slow and then go very fast it's a hockey stick.
[00:03:57] Yes it does work like what are they called sparkling charts yeah. Well there's another fun thing that we can do, we can make them using the tools as well. I'm gonna start with Chrome because Chrome's one everyone likes but when it comes to animation, I tend to prefer just a little bit more of the tools that come with With Firefox and I think you'll see why in a moment.
[00:04:25] But let's start with everyone's fav. So we've got my side that folds out. It is my beautiful sidebar I love it very much you can tell I spent a lot of time on it.
>> Rachel Nabors: We're gonna bounce this up here so that you can see it better on the screen.
[00:04:43] And I'm going to make this one even smaller so it still shows there we go. I love being able to zoom. So we've got this little icon here and we open it up. We have access to this beauty. Which let's us change things and we get to see a little example up top of how quickly the ball is moving.
[00:05:03] It's a very cute visual example, let us get a little preview and then we can try it out over here. And as you can see when we pool pullet around, the cubic bezeir is updating not just here but also Here in our transition boom. So what's this look like with Firefox?
[00:05:25] Well, it looks a little bit different let's just put you at your default. Now we're gonna go over here inspect that slide out and it will be over in our CSS rules. And the icon on the cubic-bezier is just a little bit more difficult to see; it's a little smaller, it's not purple.
[00:05:52] It probably should be a color so that it's more readily visible. But I am not a UI designer for them, but look at this beauty that you get, you get at your curves here you also get these corridors presets that you can play with like let's see what circular looks like by the way these are all these are all easing that people used to have regular access to back in the flash days.
[00:06:17] It would be lovely, if we had a set of defaults like this to use in the browser, kind of like we could describe quartic/ease/in, in addition to just ease/in. Maybe one day that will happen, in the mean time we are smart, we can go out, and we can get these.
[00:06:34] We can get these different cubic vase values ourselves. And you can see that they've been updated for us, boom.
>> Speaker 2: Quick question.
>> Rachel Nabors: Yes?
>> Speaker 2: Can you show how to access Chrome's bezier curve stuff?
>> Rachel Nabors: Didn't I, do you want me to show it again?
>> Speaker 2: The person is just asking how to access it.
[00:06:57]
>> Speaker 3: If you don't have turned on the animations that is in the console which people probably won't in the beginning, you won't see them. So here it says, next the animation.
>> Rachel Nabors: So if you don't see the animations tab in the console, what you do is you go to the dots and then you'll see it says console, it says animations, you click animations and it shows.
[00:07:22] But we won't be using that animation tab just not there. I mean well we did when I was showing the different speeds. My apologies I didn't realize it wasn't on par to fall. I must turned it on it some day in the past maybe one day. It will be open by default for everyone but until then we'll have to remember to use three dots.
[00:07:44]
>> Rachel Nabors: It's interesting also because in the future I'm never really sure where these are going to turn up. Animations used to be up here somewhere. And now it's in it's own tab and it changes all the time. So my apologies to people in the future if Chrome has decided to put these in some other corner somewhere where they're hidden.
[00:08:04] But yes, keeping bezier curves they're accessible regardless of that tab because they are CSS properties. But yeah, all right, enough playing with bezier curves.
>> Rachel Nabors: So you can use bezier curves to give your site a very custom feeling. This is croptheblock.com, you'll notice that they have a very special drop-down menu.
[00:08:33] It feels very special, like someone is pushing against a spring from behind you can almost feel like the menus are made out of foam and they're in the wind or something. Let's take a closer look there. So that is a custom easing. It's not just using easing or ease out that is custom and it helps reinforce the brand of the site.
[00:09:00] There's another site we can go to if you want to get an overview of these easing start net. When you hover over each of the easing you can get a little marker that will indicate how quickly or slowly something is moving. And these are of course back from the days of flash and there's the secret.
[00:09:17] Say you find one that you really like you're like I love easing quart I got to have that when you click on it. Look at this it even gives you the busy curve for right there for you to use. It's a nice tool if you want an overview and you don't feel like poking around in your dev tools or fooling around with a bunch of pools and handles, and you just want some solid defaults to start with.
[00:09:37] It's a good place to go.