6.1 Starting From Scratch

Hello and welcome back to advanced animation with GSAP plugins. The next plugin we're gonna talk about is the CSS rule plugin. What this plugin allows us to do is it allows us to animate properties on a CSS rule. Instead of a specific DOM object or a specific object in your webpage. So it's kind of similar to the ColorPropsPlugin. If you remember with the ColorPropsPlugin, we actually created an animation on a JavaScript object or a JavaScript variable. This time we're gonna be creating an animation on a CSS rule. Whenever we animate that particular rule, everything on the page that's touched by that CSS rule is going to animate accordingly. So in this lesson I wanna actually start from scratch. I want you to get used to starting from scratch with something like this. And so the first thing we need to do, I'm at codepen.io and the first thing we need to do is include the right things. So in my new pen here I'm gonna go to Settings, I'm gonna jump over to JavaScript and I'm going to include jQuery. And then I'm also going to include Greensock TweenMax. And then this particular plugin is another one that we have to specify here in our settings or if you are doing this on your local machine. You'll need to include another script tag for the CSS rule plugin. So I'm gonna jump over to another tab here in my browser back to the cdnjs site where it has a list of all the GSAP cdn links. And I'll again include the link to this particular page in your course notes. But what we're looking for here is the CSS rule plugin right here. So I'm gonna grab everything after the colon starting with the slash slash. Now if you're doing this on your local machine, you're gonna need the whole thing. But since we're doing this online, now we can just everything from the two forward slash all the way over to the end. So let's copy that and then we'll jump back into our pen, add another resource and we'll paste that link there. Okay, so everything looks good, we'll go ahead and save that and now we can get started. So what I wanna do is I want to create a series of lights that are gonna be flashing off and on. We're gonna have a few red lights, a few blue lights and a few green lights. And we're gonna have them constantly flashing off and on at different rates. So the first thing I wanna do is I wanna create a container for those within our HTML section. I'm gonna create a div of with a class of container and then inside that container, I'm gonna put a number of different lights. So each one of these lights is gonna be contained in its own div and we're gonna turn these div into colored circles basically. So we'll give this a class of light and then I'll also give it a class of red. So all of the divs with a class of light are going to have their width and height and shape and color defined. Or not the color I'm sorry, everything but the color. And then the specific color class as you can imagine would have the color defined on it, so let's highlight that. I'm gonna copy it and I'm gonna paste it and have time, so that we have three sets of each color. So we're gonna have red, blue and green. And then again, I want three sets of each of those and I want them to alternate like this red, blue, green. So what's highlight that. And then we'll paste it twice. So now we have nine different divs inside our container div. So the first thing I wanna do is I'm gonna create a rule for the HTML and body elements. And I'm gonna set the margin to 0, so there's not any whitespace around the edges of the screen. I'm gonna set the width to 100%. Let's expand this out, so we can see a little better. Semi-colon and then the height to 100%. Then we'll create a rule for our container divs, so .container, we're gonna set its background color to black. I'm gonna set its width to 100% and its height to 100%. Now the height here would not work unless we set the width and height for HTML and body to 100% as well. So that's what allows us to do this. If I were to get rid of the width and height on the body, as you can see it breaks and we no longer see the background for our container. So I'm gonna undo that and there we go. So our container now has everything we need, so inside the container I want to create the CSS rules for the light class. So we'll say .light and just so that we can see them, I'm gonna by default give each of these a background color of white. And then I'm gonna set the width and height for each of these to 50 pixels and then we should be able to see them. But they're all squares right now, so it just looks like one big bar over there on the left. I'm gonna change that, so that they are circles. And the way I'm gonna do that is I'm gonna put a border radius on it. And if we make our border radius at least as high as the width and height, then we should be fine. So we'll set border radius to 50 pixels and that should give us perfect circles and there we go. So now I just want to align them across the stage a little bit. So I'm gonna set them all to float to the left, we'll set some margins on them. Maybe 20 pixel margin on each one and that should spread them out quite a bit and there we go. So that's a good starting point and and now we're just gonna go into each color. And we're not actually gonna set the colors for these yet, but I just wanna make sure that that it's going to work. So for our red class for example, we'll set background color to red and there we go. So every third one as we saw up here, every third one has a class of red applied to it and that works out fine. We'll have .blue, if we can spell it right and there we go. Background color is set to blue. And again, I'm gonna get rid of these background colors in a moment, but for now I'll just leave them there. And then we have green, background color is green. So that gets everything set up visually on the stage. These are initially going to be, in fact, we can go and leave these red, blue and green. I was going to just animate the color from black to red or black to blue depending on which class we're talking about. But instead of doing that, it would be much easier just to go ahead and set the red, blue, green and just animate the opacity. So now that we've got all of that set up. In the next lesson, we'll jump into this CSS rule plugin and talk about how to make it work. So thank you for watching and I'll see you then.