2.4 Animating the Shadows

Hello and welcome back. In our last lesson we created our looping animation of our circles bouncing, but it doesn't really look like they're bouncing right now. It looks like they're just growing and shrinking. So as I mentioned before we're going to finish off this effect by animating the drop shadow or the box shadow behind each of these circles, and it's gonna give us a much more realistic effect. And basically what I wanna do is when these circles are at the peak of their bounce, when they're at the top of the bounce, I want to animate the shadow outwards a little bit. It's gonna come down and it's gonna look like there's really a light shining down on it. So by bringing the shadow a little bit further away from the bottom of the circle, it'll look like the circle's further above the circle beneath it. So, hopefully that will work out well for us. Let's start by going to our CSS and you'll notice, let's stretch this out a little bit. You'll notice if we scroll down to our circles, that our box shadows are set up here under the circle class. And I'm gonna go ahead and grab that box shadow property, everything but the semi-colon there at the end. And I'm gonna copy it, because that's what we're going to start with. Now, the starting pen for this particular lesson if you haven't been following along in your own files, or if your own files aren't working right. You can find the starting pen or the link for it in the course notes, and once you open that up, we'll just click on fork to create a new copy and then we can get started. So we've already copied the properties for that box shadow, and now in our Java Script we're going to add that to our looping animation here. So when these circles reach the peak of their bounce, they're gonna be at a scale of 1.2. And I also want to animate the box shadow down, so let's go down to the next line just after our scale. And we'll create a rule for box shadow. And again if you're using CSS properties like box shadow that have two words in it separated by a hyphen, it's gonna be the same but there's not gonna be a hyphen there and the second word is gonna be capitalized. So I have boxShadow: and then inside quotation marks, I'm just gonna paste that box shadow rule and we're just gonna change a couple of things. By default, initially the position of the box shadow is at 0 pixels by 4 pixels, which means it's not offset at all horizontally. This first number's for the horizontal offset, so it's not horizontally offset but it is vertically offset by 4 pixels. Which means it's gonna be horizontally in the center of our circle but it's gonna be down 4 pixels below the bottom of the circle. And then the third number here is the amount of spread or the blur of that shadow, and then after that we have our color, the color of our shadow. So really what we wanna deal with is just the vertical blur here or the vertical offset. And then the blur just after that, and I'm gonna set both of those values to 25 pixels. And we can already see that something's wrong here because we have this little exclamation point and it's because of this semicolon here. But just so that you can see what that does, if we click on that exclamation point, we'll see unexpected tokens. So it gives us errors whenever it sees them. And that's not supposed to be a semicolon there, it's supposed to be a comma. So we'll change that to a comma and hopefully now that we watch our animation again, there we go. Now at the height of that bounce, we see that our shadow is blurring out a lot more and it's moving down. So it really gives us the effect, that this is moving away from a surface and that there's a light shining down from above, and it really helps to sell the effect that these circles are just bouncing in place until our content is done loading. So we'll continue working on our preloader in the next lesson. For now, let's go ahead and save our changes, and I'll see you then. Thank you for watching.