The full video and many others like it are all available as part of our Frontend Masters subscription.

Rachel Nabors

Rachel Nabors is a CSS animations fanatic and award-winning cartoonist. A regular conference speaker, she ignites new technology with her experience in visual storytelling.

Rachel Nabors

Web Animation

In this exercise, you will use different easing and durations to add physics to the ball animation.
- https://cdpn.io/LVEdXg

Get Unlimited Access Now

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.

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.

So here's the transition timing function, defaults to just ease. We are going to 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.

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.

But that doesn't really show the effect of inertia and friction upon this ball as it rolls across. What probably is going to happen is that when the cat officially initially pushes the ball. It's going to go a little fast. It's going to go a little fast as it's got an input of energy and then it's going to slow down as that energy is siphoned off by the universe at large and our slow and inescapable progress towards violent heat death.

But that's for another talk.
Speaker 2: I'm sorry.
Rachel Nabors: What?
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 going to, there we go, easeinOutQuint, that looks right. It's going to go fast, then it slows down.

Or no, no maybe. I like easeinOutSine. It's going to speed up a little bit from the input and then it's going to 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.

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.

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.

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.

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.

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.

Ready to take your code to the next level?

Intense courses with world-class teachers and unlimited access to our growing library of videos for the great price of $39 per month.

Get Unlimited Access Now