6.2 Animating the Rule

Hello and welcome back to Advanced Animation with GSAP plug-ins. Now, that we've got our HTML and CSS figured out. We're going to move on to our JavaScript in this lesson. So, if you didn't follow along by creating your own pen and entering in all of this HTML for yourself, you're welcome to just use this particular starting pen, and I will include the URL for that in the course notes. So, once you pull that up let's go ahead and fork it to create a new copy of it. And if you remember, we have an outer div which is our container, and then inside that container we have numerous divs which represent the different lights on the stage. Some of them have a class of red, some are blue, some are green but all of them have a class of light applied to it, so what I want to do is I want to animate these lights off and on, and we're going to use the opacity to do that, and we're going to be using the CSS rule plug-in to do this. Now, one of the things the CSS rule plug-in gives us is, it gives us a method called Get rule, and we pass into that method the name of the rule we want to get. So, if we want to grab all the properties for this red rule then we would pass in .red to the getRule method. So, let's see what that looks like. We'll go over to our JavaScript, we'll create a variable here, and let's call it redRule and we're gonna set that equal to, and the way we call this getRule method is first we point to the plug-in itself, so CSS with all capital letters, Rule with a capital R. Plug-in with a capital P. And we're gonna say CSSRulePlugin.get, all lowercase, rule with a capital R, open and close parentheses. So then, inside the parentheses and inside quotation marks, we'll type in the selector for that rule. Which is .red, so now, we have this CSS rule stored in this variable, and that rule is what we're going to be animating. We're not selecting particular items on the or in the browser window and animating those items. Instead, we're animating properties of a particular CSS rule. And then, anything in the browser window that's affected by that rule will have those particular properties animated for it. So, let's see how that works. We've created our rules stored in a variable will skip a couple lines here and we're gonna do this just like we've done before tweenMax.to, and then this time we're animating the rule itself so we're going to point to that variable we created that's holding the rule. Now, if you wanted to inside these parentheses here you could, instead of typing out that variable name, you could just type all of this. So, we could say to CSS rule plugin that getRule comma space, and then the duration etc etc, but that's a little harder to read I would rather create a variable, and then just point to that variable because that's much easier to read it than the alternative. So, we're pointing to the rule comma space. I want this to happen pretty quickly, I want each of these lights to animate off and on, so all the red lights are going to animate off and on together, the blue ones together, and then the green ones together, so they're all going to be slightly offset. But again, I want this to happen pretty quickly over the course of half a second, so I'm going to type .5 for the duration comma space, and then our opening and closing curly brackets for our animation. And then, just like we've done with our other animations, we're going to enter in a new property here. And for the CSS rule plugin, that property is called css, and then rule with a capital R. Notice the CSS here is all lowercase. So, we're going to type colon space, and then our set of curly brackets for the properties that we're going to animate within that rule. And then, after that rule we're going to type a comma here and I want to turn off easing for this. Since, we just got colors blinking off and on, it doesn't really make sense to have easing, so we're going to set it to Linear.easeNone. And I want to repeat over and over again. So, if we want to repeat infinitely, we're going to set the repeat value to negative one, and then I don't want it to just animate on or fade in, and then jump back to black and fade in again, instead, I want it to go back and forth. I want it to fade in and then fade out, and then fade in then fade out, so we're going to use the yoyo property again and set it to a value of true. So, this is going to animate off and on, and so then we're going to jump inside the CSS rule object here. And inside this object, we're just going to include the properties of our rule that we want to animate. So, let's say that we wanted to animate the background color. And this works just like vanilla tween max, if you're animating a CSS property that has two words in it, you're not going to say background hyphen color, instead, you're going to say background, and then color with a capital C. So, let's say we want to animate those red circles from red to, you'll notice we don't put anything in the quotation marks it just animates the black. But let's animate it to value of yellow. So, when it refreshes, we'll see that it just loops back and forth from red to yellow, pretty cool. And so, you can use any CSS property you want here, as long as you have a sensible starting default value. In this case, our starting value was red, and we're animating to a value of yellow. Well, the background color's not what we want to animate here. We could do it that way, we could animate from red to black and it would look like it's just turning off and on and that's certainly one way to do it. It's perfectly fine to do it that way, but I'm going to do it using opacity. So, instead of background color, we're going to point to opacity and since, our opacity is represented by a solid number, we're going to type in number one with no quotation marks around it, but you'll see there's no animation happening because one is our ending value. We don't have a starting value right now. We haven't set opacity to zero anywhere else. So, we're gonna start off at zero and we're gonna animate to one. So, we need to put our starting value over here in our CSS. Now, one thing you'll notice is that if we placed it inside this light rule. Well, let's just try it. Let's go ahead and jump inside the light rule, and let's set our opacity here to zero. And you'll see that that turns everything off, you'll see that the red lights are not animating on and off like they should be, we created this tween for the red rule and told it to animate its opacity to a value of one but we can clearly see that that's not happening. And that's because even though this property here affects those red lights, that property isn't a part of that rule that we've grabbed using the getRule method here. We've grabbed the .red rule, and so that's where we need to put our starting value. So, we're gonna grab this opacity zero here and cut it and instead, we're going to apply it to our red class, our blue class, and our green class. So now, they're all invisible but as things refresh, we should see our red start animating on and there we go. Sometimes, you just have to refresh it again, if you're using code pen, the keyboard shortcut for refreshing the stage down here so you don't have to refresh the whole browser window is if you're using a mac its command shift 5 or in a PC control shift 5 and that will refresh your pen down here. Or if you're using somebody else's pen, I believe you do have a button up here that says Run and and you can refresh it that way. So now, we just need to do the same thing for blue and green. So, we've done it for our red rule. I'm just gonna grab this entire line here except for var and except for that closing a semi-colon, and I'm going to copy it and let's get rid of that semi-colon for now, replace it with a comma, and then the next line we'll paste it, comma, next line paste it again, and then a semi-colon. So, for the second one, we're going to be pointing to the blue rule and our third run, we're going to be pointing to green. So, let's change the name of the variables as well And there we go. So now, it should switch back to red, and it does. So now, we just need to copy this tween here for the blue class, and for the green class. So, let's highlight that, copy it. Hit enter a couple times and we'll paste it. And this time, we will tackle the blue rule and we want to do the exact same thing but I just want it to come in a little bit later, I don't want it to come in at the same time, so after our yoyo true, we're going to type comma go to the next line, excuse me, and I'm going to type delay. And let's delay this by a quarter of a second, 0.25 and let's see if this works. So, there we go, we've got it slightly delayed so that the red is coming in first, and then the blue. So now, let's do the same thing for the green, so let's skip a couple of lines, and then paste again and this time, we're animating the green rule, and we're going to add a delay to it as well. We're going to delay this one by point five seconds. So now, we have the same animation, but each one of them has a different delay set, so they're all animating on at different times and that looks really nice. So, that's how you use the CSS rule plugin to animate all items on the stage that are associated with a given CSS rule. So, thank you for watching, and I'll see you in the next lesson.