I Will Never Write CSS Animations Again Without Using This Tool

Key Takeaways

well done CSS animations can really elevate your site to the next level but it's quite difficult to make these animations because it's really hard to actually get in there and see exactly what's happening at every step of your animation that's why I absolutely love the dev tools built around animations both in Firefox and chrome and in this video I'm going to show you how you can use both of them not only to improve your own animations but also to figure out how some of your favorite animations on the web are done [Music] welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner and in this video I'm going to start off really simple showing you the power of these tools and then moving on to more complex animations throughout the rest of this video so to get started with this video I have a really simple box that when I refresh the page it spins and changes some colors using this animation code right here pretty straightforward stuff and then I have a button that when you hover it it just changes colors between white and black and black and white as you can see here this is using a transition instead of an animation and that's so I can show you the difference between animations and transitions inside of the dev tools so in order to access these Dev tools all you need to do is just right click your page inspect open your Dev tools like normal I'm going to bring them over onto the side here and just give us a little bit more room so we can actually see what we're working with and then what you need to do is you need to click on these triple dots at least if you're in Chrome that's going to allow you to go to the more tools option and at the very top you're going to see it says animations I'll just zoom in here real quick so it's a little bit easier to see what's going on on my screen so you can see more tools and then click on animations it's going to pop up this anime Nation drawer in the bottom section and if you want to be able to see this in a full screen view you can just right click click move to top and now that's going to move it to this top section so I essentially have a full screen animation View and the really nice thing is any animations that occur on my page are going to be tracked here so if I refresh my page you can see the Box spinning shows up as this animation right here and now if I hover over my button and unhover you can see I have two different animations showing for the hover and the UN hover effect but the real power of this comes in when I click on one of these animations for example let's click on this button animation you can now see that that entire animation and all of the keyframes are broken down into this one section right here and I can mess around and change this animation if I want the only downside to this inside of chrome is if I do try to click to change this animation you're going to notice it brings me to the element Tab and highlights the element that's being animated that's because they generally expect you to use this animation tab at the bottom that way you can view both your elements and your animations at the same time so I'm going to bring this up as large as I can possibly make it that way you can see that I can drag around and change around this animation for example I can make it much quicker let's make it about 250 milliseconds and now I can click this button right here which allows me to replay my animation and you can see it replays much quicker than it did before or I can make it much longer let's say that we want to make it you know 15 minutes or whatever I click replay and you can see it looks like it's not moving because animation is so long and I can drag this along and see exactly what's happening every single time and if I want I can even pause and play my animation like I'm doing here now if I speed this back up so it's quite a bit quicker so it's a little bit more of a normal animation I'll bring it back here I will just make it even shorter there we go actually let's just refresh it completely by going to one of these other animations and then coming back to this one there we go so now we're back to mostly what we had before you can see it's now 4.5 seconds instead of one second but the nice thing is what if I wanted it to be slower for example what if I wanted to be 25 of normal speed to really see what's going on I could click 25 redo and now you can see it's running at a quarter speed or I could do it at 1 10 speed this is really great for our button for example where it's a transition you can see it's transition between dark and light and at 100 speed if I replay this animation you can see it so quick I really can't tell what's going on because it's only 100 milliseconds I can just come in here so I was saying 10 speed so now it's going to take one second and I can really see what's going on in every step of that animation and the really nice thing is since I'm using transition here it's broken down into each property that I'm transitioning over while this box animation since I only have one animation on the box which is called rotate and change color I just see that one animation now if I had other animations on this box or other properties that are animated at the same time through like transitions those would all show up on here as well but for now all I'm seeing is this one animation because that's the only thing occurring at this time in my application also if I want I can pause all animations by clicking this pause button now you can see when I hover my button it's actually not causing it to animate and that's because all my animations globally have been paused and this timer actually changes all animations for example when I hover my button it's now at 10 speed because I've changed this to 10 here so you can really play around with all the different animations and exactly what's going on and just being able to scrub through them is really nice change around where your different keyframes are going to be for example you know what I want it to be less time at this color right here and I can do that by just moving around these keyframes same thing here with these ones for the text I can say you know what the color is going to take longer than the actual text to animate now if I go to 100 speed and I go and I play this animation you can see that it takes much longer if we especially span this out even more for the color to actually transition versus everything else now if we move on to a slightly more complex animation I can show you some other stuff that goes on for example here I have this loading spinner there's just two of them showing up and you can see that there's a lot of stuff going on with this animation so I'm going to inspect the page I'm going to go over to that animation tab by just going over to I actually it's already open so we don't need to bother with that I'm just going to refresh my page because these animations are on load as you can see there's my animation so if I click on it you can now see there's a ton of information being displayed down here and that's because there's a bunch of different elements that all start animating and animate during the exact same time period as you can see all of these different elements as I hover over them are all animated at the exact same time so like my text my different spinner elements and so on they all started the same animation at the same time so I can actually play around and see all those different elements all at once so I can say you know what I want one of these to spin a lot faster so I'm just going to shrink this down and now you can see that this blue bar is spinning way faster than the red and the yellow bar just because I've increased the rotation of that to be much quicker and also since this is a repeating animation essentially it repeats an infinite number of times you can actually see where each repeat is by these different notes and if I had more than one keyframe such as down here where I have text color you can see these empty nodes are essentially the keyframes in my animation and the solid colored ones are the start and the end of my animation and since it's repeats you can see I have dark colored nodes every single time my animation starts over now I can do as much modifications and editing as I want inside of here and the really nice thing is all the changes I make you can see they pop up up here it's enzyme style so you can see my animation duration has been changed and my animation delay has been changed and if I change around other things for example this text color one I'm going to mess around with some keyframes and maybe I'll mix around with like you know the different values for the duration all of that's going to be kept in those inline Styles so it's really easy for me to actually go ahead and change these and then copy and paste those changes over but mostly the nice thing about this tool is it makes it really easy for you to see what's going on and what all properties are being animated by just hovering over things and be able to slow down your animation speeds is super super helpful or even just straight up pause them to see what's going on and then to scrub through them to see exactly what's going on at each phase in your animation that's what I really love about these Dev tools now I want to go to an even more complex animation if we move over here this right here is essentially the prettier logo and I created this in a video same thing with this video this is a video that I've created I'll link in the cards and description for you same thing here this prettier logo it's a video I've already done on how to make this animation I'll link in the cards and description for you when I refresh you can see that it gives me this style of Animation right here and then when I click on it it does this kind of cool animation as well so if we wanted to see what was going on obviously we should inspect it and we should go to the animation tab let's just make this a little bit smaller here and now if I refresh my page you can see that I have this big animation showing up right here that kind of is saying all these different rows are loading so if I click on this you can see I have all the animations and everything showing up dashed lines are essentially saying that some things are waiting because there's a delay in this animation and so on you'll notice when I replay this animation the right hand side actually doesn't change and this is where I want to talk about some of the caveats of this actual tool so to explain what's going on I'm actually going to use the exact code from this tutorial and you'll notice that the animation that is running is called load row and load row is a animation that has no start frame and at 100 it changes the translate to zero the other really important thing to note about this is where this load row is actually used if I just search for this real quick you see it's used right here on the row that it has a forwards property set so the way that this animation works is on page load my translate is set to some offset value for example like negative 100 pixels and then my load row is going to be running and since my animation is set to forwards it means whatever value is set inside this animation which in my case is a translator zero is going to be the new value for the translate property of my actual row so instead of having to translate of negative 100 pixels the new value is going to be zero and that's how this animation works the problem with this though is when I try to replay my animation my current translate property is zero and I'm animating to a property of zero so obviously my animation does not replay properly so if you have animations that change around properties but don't have like a starting place for it so if I come back to this load row you'll notice that there is no starting keyframe the starting keyframe is just whatever the current value of my load row is and in my case my current property value here is going to be 0 because I set this to forwards it's not actually going to repeat properly the way I can get around this if I wanted to is I can come in here and I go to my animation and I could set like a zero percent keyframe to set my translate to the offset value and now you'll notice my animation still plays exactly the same but when I try to rerun this it's going to work a little bit better for example if I click rerun here you can see that they're actually animating they're not animating exactly as I expect because it's waiting until the animation starts before it actually sets that property to that offset one way I could get around this is if I go back to my load row here and instead of using forwards I use both as my direction here now that's actually going to fix the problem so my animation should repeat properly when I try to refresh it so I come in here do a refresh you can now see it reset back to the normal state so this actually kind of helps me debug certain problems because maybe my code would actually be better written if I used a style of Animation like I just did where I started at zero percent and went to 100 instead of relying on the default value of that property that may give me a more robust animation especially if I need to replay that animation later instead of just doing it on load like I'm doing currently also you'll notice when I click on this animation it does another big cool animation right now it's not working super well because of certain things that I have in my animation code so we just need to swap that back to what it was before so inside here if we just undo all the different changes that we have done get it back to what we had before now we can minimize that down and when I click on this animation give my page a full refresh and now here if I click on this you'll notice it moves all the rows out of the way and then moves all the rows back in and I can actually view this animation you can see exactly what's happening with each one and for example I can make certain rows go a little bit faster by saying you know what that one's going to slide way faster and now if I want to be able to scrub around I can see exactly what's happening and you'll notice that this one row is going to be sliding as you can see it's this row right here with that pink it is Sliding Away much faster than all of the other rows just because I sped it up right there so that's really something interesting to look at and again it's really nice being able to pause my animation or play it at like a slower speed so when I click you can see exactly what's going on with each one of our rows in depth at this slower speed and you'll even be able to see that this row right here is going to zip away much quicker just because I have that slide speed set faster now another thing to mention before the end of this video is that Firefox also has really cool animation tools as well and it's even better than Chrome in certain ways but I personally don't like it quite as much so the way that this works is whenever you've selected an element for example a head body whatever it is you can go to this animation tab right here and then anytime there's an animation that happens on your page that is a child or this current element so if there's an animation on the body or any child of the body it'll show up in here so if I refresh you'll notice I get my box animation now the really nice thing about the way Firefox does it as you can see down here I can see all the different properties that are being changed inside my animation for example my background color and it's even giving me like a view of exactly how those properties are changing throughout that animation same thing with rotate down here it's showing my rotation across all the different keyframes the one downside is I can't change any of these properties there's no modifications at all I can make and another really annoying downside is sometimes when you're navigating around so like if I click on my box now my animations disappeared completely same thing if I go back to my body I have to refresh to get that animation to show up so it's not ideal also if I'm clicked on my button for example and my box does an animation it's not going to get picked up because I'm not clicking on a parent or the element that's being animated so that's another big downside so I think here if I go to the test button you can see if I animate over this you can see I get properties for the color and background color and it really shows me exactly how those are changing between their different values I have the same ability to slow down and speed up my animations and play them and restart them I just find that it's not quite as nice as the tool inside of chrome so I prefer Chrome in this regard but Firefox has a really nice tools so if that's what you use they're also there just make sure you go to this animations tab now if you want to learn how to build that really cool prettier logo animation at the end of the video I'm gonna have it linked right over here or if you're just getting started with animations I have a full crash course covering everything you need to know about CSS animations it'll be linked right over here with that said thank you very much for watching and have a good day