Stop animating box-shadows the wrong way!

Key Takeaways

here are two box shadow animations that look pretty much the same but one is a kickbutt way to do it and the other can be janky as hell and it can kill the performance of your site so in this video we're looking at a nice trick that you can use to animate shadows without a performance hit how you can check the performance in real time and if you stick around until the end a nice little bonus tip as well hi there my name is kevin and if you're new to my channel here we learn how to make the web and how to make it look good while we're at it with weekly tips tricks and tutorials and speaking of making things look good one of the biggest problems that happens is people assuming that if things look good on their computer they look good everywhere the truth is not everyone is running an iphone x or a macbook pro or they don't have these crazy fast internet speeds that i only dreamed of having as a teenager in the late 90s while waiting for images to load and what really you do need to take performance seriously and you need to realize that not everyone is on a machine that is as fast as yours and one of the most common issues i see is people animating things that they shouldn't animate and shadows is really one of those things that can make a big performance hit we're also going to push that even more and show you how we can take something and turn it into like something that could be super smooth or super janky that look exactly the same we're going to break down the difference and really see in the tools how you can analyze what's actually going on as well normally i am in vs code but because this is such a simple little thing that we're looking at i am here in codepen so the link for this is down below if you want to check it out and basically what i've done up until now is just create these two little content boxes that are exactly the same and when we hover on top they move up a little bit and then they move back down now to really hammer home this feeling there's a there already is a little shadow on there to give a sense of depth but it looks weird that it moves forward and there's no change in the shadow so usually what you see when people do this is um and you can see actually just really fast i have my content but then i have a pseudo hover and a shadow hover so just so we can do them separately so the first one here is my shadow hover so we can select that so usually what we see is people coming in and on their shadow hover or you know on whatever they want to have their hover effect they'll just come and change their box shadow so you come in and then you say that this will go up to like a point three this can be now my offset will go a little bit bigger we'll make the offset we'll try it up to a five the blur can go up quite a bit too and maybe a small little 0.25 m and if you don't know too much about box shadows and all the different values here i do have a series that dives into those um so now by doing that when we hover on top we can see that shadow coming in and off like that and i think the shadow actually looks pretty good but obviously we need that to transition as well um so i am going to just steal this my content one i'm going to put it on my dot shadow hover because i don't want this to be on both of them uh so the transition here i need to transition my transform but i also want to transition my box shadow so we'll take that one one second ease as well and we can go and check that out you can see it goes up and then back down and the shadow gets a little bit darker maybe we could even make that blur a little bit more i'm pretty happy with that and we could speed things up and play with the timing maybe it's a little bit slow but overall i'm pretty happy with the the type of effect that's creating the issue with this is when we animate box shadows and when we animate a lot of different things that people animate it actually causes some performance issues uh it's not too complicated to set up it is a little bit more work but i really do think it's worth it especially if you have a lot of different animations going on and i did get this idea from tobias here so this is a blog post that he wrote so i do think we have to give credit where it is due and if you want to check out this it is linked down below so the we have the shadow there so the way he did this and the way this makes a lot of sense and we will see how we can check the performance of these and we're going to compare them in a second i'll show you in your dev tools a few different ways where you can see what is actually happening here uh so in this case i don't want my i want to take my pseudo hover pseudo hover because we want to be looking at our second box on this side so that's my pseudo hopper right there so on the pseudo hover i will need to put a position of relative on this big relative because we are going to be using our pseudo element on here and the suit element will be absolutely positioned so sudo hover and we will do an after and for that let's give it if you need a pseudonym you need to have content and if you're not used to pseudo-elements or you don't know them too well i do have an in-depth series on those uh so we have my content then we're going to come in and say that the position is absolute we're going to give this a top zero left zero right zero bottom zero and to make sure that it's actually showing up let's give this a background of we'll say lime green and there we go we have my lime green suit element covering my entire element and you may be going why are you doing this and what we're going to do is we're going to take the shadow hover here and the hover one so this is the finish state we want we want to get the shadow when this is all said and done we're going to copy that and we're going to move it down over to here and put that on my suit element there you go kevin that's just breaking everything because it's always showing up and we don't need my lime green on there anymore and there we go so you can see it's in the finished state so when we're here it's exactly what we want right now and the idea with this is we're sort of pre-rendering the shadow we're bringing our shadow in ahead of time and what we're going to do is drop the opacity of this down to zero and then what we want to do is come through and say that my hover after so my pseudo hovers hover after so you know when we hover we're selecting the pseudo element and we're going to do an opacity of one and that means that now when i'm here you can see it turns on and then it turns off and then what we can do is just grab the transition that we had right here and on my pseudo hover after we want to come in and transition that but we only need one because the transform isn't on the pseudo-element the transform is happening on the parent element and here we can drop this to opacity opacity and so now when i hover on this one and when i have her on that one they look pretty much identical right there's pretty much the same thing happening for both of them maybe one well kevin this is a lot more work to get the exact same effect let's go and look at why we want to do all this so i am going to be opening this pen in debug mode just because if you're looking at it in the regular pen from my experience um this is an iframe so you can't get it to work so we're going to jump over to debug mode here and just hit refresh to make sure it's the most up-to-date version and we're going to open up the dev tools and jump into here and there is a performance section in your dev tools where you can record the performance and see different things happening but for simple so you know just to show you really quickly if i hit record you can see that one i'll go on to this one and then i'm going to hit stop and you can see all the different parts and different things that were happening where frames are running you can get your frame rates you can see the scripting the rendering the painting and all that so let's select this is when i did my first one on the left side and i'm just doing this really quickly and we're going to look at another easier way to see all of this but you can see that there was 32 milliseconds of rendering 18 milliseconds of painting going on and then if we go and grab the other side here there's only two milliseconds of painting and 20 milliseconds of rendering again to compare that over on this side 32 and 18 so you know you can see from this one right here just the comparison as i quickly selected there's only the painting pretty much it didn't have to repaint almost anything now this is a little clunky i find especially if you're just looking for things like this so another way that you can get in and check things out here is if you click in your dev tools and you go to more tools and you go to the performance monitor and this i love because it's in real time you can see it happening so i'm going to shrink this down a little bit and i've made it so we're only looking at our style recalcs but you can check your cpu usage if you're doing j you know javascript and it's listening for events you can be looking for the frame rates and different things like that and the layouts if things are being repainted on the page and so when we hover on that first one and then i drop down you can see here that it's showing me in real time the style recalcs per second and we hit what about 60 there i guess and you can even see the layout changed once and then once again there and you can see the cpu usage almost nothing but there was a little bit of cpu usage going on there so we're hitting about 50 60 frames i think we're getting up to 60 uh when we do that on that one let's go check and remember this is the one where i animated the box shadow and let's go and check out this one well that's not so much is it we can go back down huh i mean isn't let's let's turn these off we don't need those we're just look at the difference here so remember this one hits close to 60. there we go we hit 60 exactly and then we can come on to this one and we can see that we're getting up to 16 i think was the highest it got up to there so the difference there is substantial and this is for a really simple little animation that we're doing where we're just moving things around a little bit so if you're asking yourself why this is happening it's because opacity doesn't require the page to be repainted the only things you generally want to be animating or transitioning are opacity and things like transforms which is also why here on my transform i set it up to be a transform and not using something like top because if you are going to do this and you see it a lot position you see people do it a lot and let's even we'll kill this even more let's take our shadow hover and let's give this a position of relative and a top of zero and then on the hover let's give this a top of how much do we want to move it by the transform was uh this one here 0.35 m so top negative 0.35 m and often what we would see people doing let's take okay one second i gotta move a few things around or this will just be my um sudo hover so this is going to work there you can see it's still working but this one now it's it's uh we're not do them if the movement is not happening from my transform anymore uh the movement's not happening from my translate anymore it's happening from that top property so this one we can change to our top and it should look exactly the same there we go you can even see it's really janky see how the frame rate on that is just died and here it's nice and smooth and here it's like super jank oh that's painful to watch so if we come back and let's go look at what we were looking at before where we can see why this is happening so now if we look on this one it's still nice and smooth this one you can see it's still all really janky over here and we can go and look at what's happening and in this case there's actually a couple things happening if you stayed on the recalcs you might say it looks exactly the same whereas here we're still hitting about 16. and if we hit on this one we're still maxing out at 60. so you're saying well okay why is it so janky then compared to this one which is super nice and smooth now if it's still maxing out at that mount of styles and this is actually where it comes into the layouts so if we go and look at my layouts per second this one is going to be changing probably at the max you can see it's this little nothing mountain if we go into this one holy moly we're re-creating or repainting the page for every frame along the way there and even actually this is where if we jump over let's close this down all right so let's let's check it out in the performance tab here as well um so i'm going to hit record we're going to go up and then down and then up and then down and hit stop and so this is the first one moving up here and then it when it moves down is on this side so if we just take that whole thing all together right here so we can see there's tons of rendering and tons of repainting going on while we're in here and let's go and take a look now at over on this side where things were smooth as butter before and my goodness it's super everything is super low so there's nothing much going on we're not pushing the computer because all we're doing is playing with opacity and playing with our transform translate whereas here we have opacity changing here we have our box shadows changing we have the top that's changing and this is causing lots and lots of issues to go on with the the page and there we have it i hope you enjoyed this video and learned something along the way as well if you enjoy using box shadows but you'd like to go deeper with them i have a whole series that takes a deep dive on those if you want to do more with pseudoelements i have a series on those as well and if you never want to miss out on anything that i'm up to why don't you sign up for my newsletter which is linked just down below as well and since you stuck around you get the bonus tip which is looking at if you have shadows that are really big you can see that this shadow is going on top of the one on the left but this shadow is not going on top of the one on the right even though it's moving forward that's weird right and that's because the shadow is anyway they're on the same level it doesn't know that we want that shadow to be in front so to fix that on my hover what i want to do is just come in and throw a z index on here said in got to spell things right to do it said index of one and now that this is here and this only works because i have a position relative on there so that allows me to use my z-index and now that shadow is on front and that shadow's on front and this is happening because now when i hover there's a new stacking context and that shadow is following along and it's actually going in front of the other elements that are on that page so just like that we can fix the issue it is not perfect because on this one it's always in front whereas here it's in front until i stop hovering because then that zen index goes away but for the most part like i've exaggerated here to just really show you how the effect is working i think for the most part it's going to be really minor but it can just help add that little extra level of detail and a nice way to explore stacking context a little bit along the way as well thank you so much for watching a huge thank you to my patrons for their support each and every month and until next time don't forget to make your corn on the internet just a little bit more awesome