 Hi there, my friend, 10 friends. Thank you so much for coming back for yet another video. And the other day I was working on a challenge on I code this, which is a new platform, or a little challenge site by floor and pop that he's put together. And the challenge was simple enough, I don't want to dive into that. But I want to look at a problem I ran into and that you might run into that you can solve dealing with box shadow animations. And part of the challenge was to create this. And they just give you a static image. But one fun thing with this is that you can sort of take your own twist on it, especially if you look at it. And if you look at the other solutions that people post, there's always cool animations and other stuff that people are playing with. And I wanted to do my own twist. So I put the subtle animation, you can see it's very slowly moving up and down, but I wanted to make it look like it's more like coming closer to the user. So what I did is I had my box shadow there. And I came down and I said, I want to animate the scale, or I'm going to increase the scale. And what we're going to do is we're going to comment this out here. You got to do your comments right for that to happen. And the idea is as it floats up, it's also getting a little bit bigger. And it looked okay. And it's very subtle right now. It's not like a really big change. You can see my scale isn't huge. But as something's moving away from something, if that's the illusion that we're going for, the shadow should also change with it. So then we can animate the shadow itself. But if you look at the animation now, you can actually see like the frames of it going because animating the box shadow and it made the box shadow really dark now just to exaggerate it so we can see it on the dark background. Because ideally you'd be lowering the opacity on that too. But even though it's a really subtle animation, all of a sudden you can see the frame by frame by frame and it looks terrible. And so, and it's just it's too much work for the browser to animate a box shadow like that. So what's the solution is to not animate a box. So what can you do instead. And this is just a quick tip. So what we're going to do is I'm going to take that off. And I'm actually going to find my main here where I had it. I'm going to take the box shadow off of that too. So we don't actually have a box shadow now. And somebody going, well, how can we do it? And this is what I ended up coming up with, which was a completely separate set of things. I'm going to turn everything on here and we'll sort of explain what I did. Oh, no, you know what? Yeah, we'll turn it all on so we can see what the find the finished result is actually where it's basically the same thing that I had before, though it's a lot later and more subtle now. But the animation is very smooth. And you can see that and you know, we'll come down here and we'll change this a little bit to just we'll make the opacity one. Just so we can see that the dark shadow and on here the background so we get red, just so we can see that it actually is animating so you can see the red part is animating as well as, you know, the scales changing all of that's happening. And just I'm sort of cheating here because the background is the same color as this background, which made it work a little bit better. You can play with Z indexes and everything to get around this problem. But what I'm doing is I'm creating a pseudo element and I'm blurring that pseudo element. So actually, if we go back to red here and I turn off that blur, you can see that there it is and then it slowly, I was changing the blur during the animation increase of this is kind of heavy for the browser to so you might not want to change the actual blur radius if you feel like you're testing it on devices and you see it is slowing down you could just stick with the same blur. But what you're able to do so even if we say we just put a single blur on there that isn't changing it's one set blur that doesn't actually get changed. But what we can do is change the opacity so the opacity goes from a point eight five to say a point five. So as it's getting bigger this blurry thing is getting bigger the opacity is lowering on it. Opacity is very easy for the browser to animate the other one I'm doing is a translate another one that the browser is very good and perform it at and scale. And you'll also notice I'm using scale and translate here instead of the transform properties I have heard from I'm a chain that not always the best idea to actually use these there's a few drawbacks to them, but for simple things like this. It's fine they're their own properties now check browser support if you do want to use it but all the major browsers do support this now. But then what I can do is go back to my inherit here so it's using the same background color. Or again play with your Z indexes if you do need to have something you might actually need to recreate the solid background with another suit element. But the advantage now is I can animate my element itself. I can animate the shadow, which isn't a real shadow. I'm just emulating that idea that there's a shadow there. And I get really nice smooth buttery performance. It's definitely more work to do. There's a lot more code involved in doing something like this. But the browser has a much better time at actually handling it. And things are going to look a lot nicer on your site. So just a really quick tip for today. I hope you did like it. And if you are interested in taking this on that challenge you might not be able to because it's a daily projects over I code this where it's a free to join and you get a daily challenge. It's usually UI components and smaller things that you can do in like 20 to 30 to 40 minutes, which is kind of nice. And it's a new challenge every day, though you can upgrade to a pro account. And if you're on the pro account, you get access to some bigger challenges as well that are like full pages with Figma files. And you also get access to all the previous daily challenges as well. So you can go through all of those and it's not a monthly fee. It's a one time purchase. And the link to it is just down below. It is an affiliate link. So if you do end up purchasing, it also does help support this channel too. And I'm having a lot of fun. It's great for just little quick things that I want to put together and I'm probably going to be back in here again because it gives me lots of little things that I could focus videos on. For me, it's really nice, but it's all built in. I can start a challenge, the code editors right here. I can work away HTML CSS JavaScript and just hack away and get something to work and submit it and see other people's things, see how they did it. Once I've submitted my challenge, it's a pretty cool site by Florence. So even if you're just signing up for a free account, it's definitely fun to plug around in that. Once again, link in the description. And that's it for this one. So until next time, don't forget to make your corner the internet just a little bit more awesome.