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

Rachel introduces the developer tools in both Firefox and Chrome. She demonstrates how they can be used to play, pause, and adjust the speed of animations running in the browser. Rachel will take a more in-depth look at the developer tools later in the course.

Get Unlimited Access Now

Rachel Nabors: So we've been talking about taking a look at how fast things are going in the browser. And I said, whatever your duration is, you want to have it and then have it again. There's another option, which is that you can work in your browser. Yes, you can do this today with your developer tools.

With all of your animations slowed down by default. So you'll be developing with short durations by default. Let me show you how you would do this. We're going to use my site. Let me open up Firefox Developer Edition here.
Rachel Nabors: We have these options in Firefox Developer Edition and Chrome and I'm going to show you how to do them, do it in both.

So here in Firefox Developer Edition I've open the developer tools using Cmd+Alt+I. Or, if you're on a Windows machine, you'd use Ctrl+Alt+I. Now let's see, we have got an animation tab right here. Boom, I'm going to make these a little bit smaller, so that we can see a little bit better.

But down here we've got the animation tab, we've got a lot of timelines, there cool. We'll check them out. But we can also set the entire playback rate to run at a quarter of what it should, and watch what happens now.
Rachel Nabors: It's working for the main one, but it's not working for the body.

That was unexpected.
Rachel Nabors: Hm, I think it only works if I set it to a selected. Well that is odd, you can pause all animations, but apparently in this version, there's a bug that's not letting me slow them universally. But it's there, one day it will work as expected.

Let's take a look using the Chrome dev tools.
Rachel Nabors: Now in Chrome's dev tools it'll probably pop up with the elements tab. If you hit escape, you will get this lovely console.
Rachel Nabors: And there's some animation stuff happening up here we'll talk about a little bit later. But you also have these options, these are liable to change over time.

Like, you can set it to run it 100% or 10% or 25%. 25% is a sweet one. So these might not be the same ones that you're going to see in the future. Problem is, as you can see when we close the tab, the thing stop applying. That might actually be what's happening in Firefox too.

So as you can see, it 100% slows down every animation from the text change, to the slide out rate, to how fast her hands are moving. And this lets us work with animations and see that there's a little slight bounce happening in this slider, which is exactly what I wanted.

I wanted it have a little bouncy happy feel to it. But it's kind of hard to see that when you're running it at 100%. So, for development, I might actually use my browser, with my browser open, my browser's div tools open. I might do everything and at 25%.

I'm going to see if that's actually true over here, let me see if I can get that right.
Rachel Nabors: The nice thing that I like about the tools in Firefox is that you can make them run even faster. It has a little bit more options, which I appreciate. Let's see, no, it's being a little buggy today.

The difficulties of using nightlies and such. Sweetness.

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