This course has been updated! We now recommend you take the CSS Animations and Transitions course.
Transcript from the "Exercise 2: Applying Physics to the Ball" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Rachel Nabors: I hope you still have your ball exercises open, because now it's time for a less taxing experiment. I want you to experiment with different kinds of easing and durations to find the combination that feels right to you, for how that ball should be rolling. And when you're done, take a break.
[00:00:21] We're going to have a moment for everyone to go powder their noses etc. When we get back, I will talk about the coverage for browsers for CSS transitions. It's time to experiment with some of those easings. All right. So. I asked everybody before break to go out and play with the kinds of easing that they can create and pick one that feels the best of them.
[00:00:59] So here's the transition timing function, defaults to just ease. We are gonna try linear.
>> Rachel Nabors: So boring. Nothing moves that way. Nothing ever moves that way. Well we could try ease out or slow out, goes out slowly. This is the default, comes with your browser. Notice it starts fast and then it slows down.
[00:01:24] I guess that works all right. Ease-in would look like it's running up against the wall. Wait, ease-is is not an actual easing, here, ease-in. Notice it accelerates and then it stops abruptly. That might look better, if we had stopping right here against the edge of the screen, then it would look like it just slammed into a wall.
[00:01:45] But that doesn't really show the effect of inertia and friction upon this ball as it rolls across. What probably is gonna happen is that when the cat officially initially pushes the ball. It's gonna go a little fast. It's gonna go a little fast as it's got an input of energy and then it's gonna slow down as that energy is siphoned off by the universe at large and our slow and inescapable progress towards violent heat death.
[00:02:16] But that's for another talk.
>> Speaker 2: I'm sorry.
>> Rachel Nabors: What? [LAUGH]
>> Speaker 2: That sure was fast.
>> Rachel Nabors: Sorry. I go to these places fast, such is my life. So let's just pick one of these where we're gonna, there we go, easeinOutQuint, that looks right. It's gonna go fast, then it slows down.
[00:02:36] Or no, no maybe. I like easeinOutSine. It's gonna speed up a little bit from the input and then it's gonna slow down. So copy the cubic buzeic curve, now I go back here, and we all like here's the cubic bezier curve I want and it looks all right.
[00:02:59] It does not look terrible. So a little note about cubic bezier curves here. I was just talking with a student about this earlier. So we were talking a little bit about performance and perceived speed of interfaces earlier. So that's something you should keep in mind when assigning easings to different elements in your designs and user interfaces.
[00:03:27] Ask yourself, when you're picking whether you should use something that is accelerated or decelerated, whether or not this is a human initiated response. Is the human interacting with something? Is this a response to a click or a hover or their behavior on the site? In which case, you probably want something that's decelerating, that is to say it starts quickly, it responds immediately and quickly to whatever their input is.
[00:03:51] Yes ma'am, I am clicking on the button, the button has been pressed, you are awesome, we love you. However, if it's something that the system is doing, say you're giving them one of those wonderful windows we've all seen, sign up to this site now and you'll get 10% off coupons, something like that, something they didn't ask to happen.
[00:04:10] You probably want something that is accelerating. That is, it comes in slowly and then speeds up to get off to its final state. That way, they will be less surprised by the motion. It's going to start slowly and thus be less abrupt and less disruptful to them. So keep that in mind when you're working on your interfaces.
[00:04:30] People do respond differently and perceive differently. How quickly something is changing has to be something they've impacted, or something that is going to impact them.