 Let's create some cool animations and use the animation tab to inspect and modify them. Ha! We need Jay here. Let's animate him in. Howdy, y'all. Animations are great, right? They allow us to improve the user experience for our users and provide a way for us to express some personality. We can bring our ideas to life. But there's a balance. When it comes to UI, one handy guide is the best animations are those that go unnoticed. Let that sink in. Got it? Awesome. Let's dig in with some animations and transitions. Today, let's look at a basic animation I've been playing with. It's inspired by a relatively popular film franchise you may know. We'll see if you can guess which one in the comments below. So I've got this round element and I'm going to spin it in and I'm thinking of revealing an image on top of it. Let's whip open the animations tab and see how we can use that to help with our animation. How do we get to the animations tab? Well, it's under those three dots, more tools, animations. Or we can use the command palette. Control Shift P or Command Shift P in Mac OS and then type animations. We want show animations. Once we have the animations tab open, we can start recording animations. Consider this basic animation that spins an element. Once I hit play, the animation is recorded and I can now inspect it within the animations tab. Once recorded, we have a few things we can do with the animation. We can adjust the speed of the playback, scrub the animation and modify the speed and delay of an animation. When we modify the timings for an animation, DevTools applies inline styles to the element. These will persist even after removing an animation recording, something to be mindful of. Okay, so the tools are rad, but what about when our animations get a little bit extra? Let's take what we have, but now we're going to spin and do a mask reveal at the same time. Recording the animation shows the two animations side by side. The idea for this animation is to do a mask reveal and spin whilst fading in an image. Jess, do you like this extra animation? I do like it, but the timing doesn't feel quite right. Let me adjust the e-sync a little bit here. We can adjust the e-sync curve with the DevTools e-sync tools. In this case, I want the e-sync to match in both animations, and this will come down to how our CSS is architected. Perhaps we have the e-sync in a shared custom property, or we have it defined explicitly via animation's timing function. Jay, let's fade out the image, shall we? Let's get an image fading in. This is where we want to try and nail our timings. Now our demo does the ring reveal while spinning, and we have an image fading in. But we want the image to fade in quicker and later in the animation timeline. No problem. Let's grab the fade-in animation and drag it and size it where we want. It's likely the values produced by DevTools won't be exactly what we want, but they provide a rough guide for us to achieve what we want to achieve. Either with custom properties, or however we are composing our animations. Next, let's add a hover transition where the element scales up. We can use DevTools to inspect that. How about when it scales up, it rotates the border infinitely? We haven't covered infinite animations. Here, we've got a little scale up on hover. You can see that each time we hover the element, we get a recording in DevTools to show the transition that's happening. You can adjust the same way you would in animation. We can also inspect our new infinite spin animation. You can see that it shows the infinite iterations for a larger window of time. If we drag the timing on this animation, it affects all iterations, which is neat. And there we go. A little insight into using the Animations tab to debug and build animations. We're continually looking to improve the Animations tab. We want to make it easier for you to make amazing animations. We'd love some feedback on what you'd like to see in the Animations tab and what you find useful. Thanks for having me, Jesslyn. Also, did you guess the film? Thanks, Jay. I can guess it, but I won't tell you. Where can we find out more on the Animations tab? To learn more about debugging animations with DevTools, go to goo.goal-devtools-animation. That's all. See you for the next DevTools Tips. That's a wrap, y'all.