4.1 Tweening Properties

Hello and welcome back to advanced animation with GSAP plugins. In this lesson we're gonna get started talking about a new plugin, called the ColorPropsPlugin. Now by default with GreenSock, you can animate almost any color property in CSS. However, the ColorPropsPlugin allows you to animate color properties of JavaScript objects. And you might not find yourself using this particular plugin very often unless you want to deal with animated gradients. And that's really the most common use of this plugin that I've seen, is animating a gradient from one shade to another. Now this particular plugin is a little bit complicated, so I want to take this one step at a time to make sure that we really understand what's going on. Now one thing I do want to point out is that this is one of the plugins that we do need to point to in our HTML, so if you're building your own HTML files out here, you need to make sure to link to the ColorPropsPlugin. Now if you download the entire GSAP framework, then that plugin does come with it, but you do need to link to it you do need to point to it, create your own script tag that points to that particular plugin. As you can see in the settings for our starting pen here, if we go over to JavaScript, we do have a link to the ColorPropsPlugin here, it does have its own CDN link as well. So again, make sure that you are pointing to that or your file will not work. So on our screen here, I have a square and I have some text. And what we're gonna do here is we're going to create a property that's going to be animated over the course of a couple of seconds. And the value of that property, I want to display that value here in this text field. For now, I just put some filler text in there called Hello. But we're going to change that text, we're going to animate that text. So we have two objects, again, we have the square and the text. And we have our CSS rules for it here. Our square has a background image of radial gradient from red to black. Red is on the inside, black is on the outside. Position of relative within height, I don't know that we really need this position here. I can't remember why I added that, but there we go, it's not gonna hurt anything. We have width and height and it's floating to the left so that we can also float this Hello text next to it, and then we have our CSS rule for that as well. So before we make any changes, let's go ahead and fork this particular pen. And you can find the URL for that pen in your course notes. And once you open it up, let's click on Fork to open a new copy of it. And we'll make our changes to your new copy. So again, what I want to do is I want to create a JavaScript property. I'm not going to be animating an item on the stage anymore. Instead I'm going to be animating a JavaScript property. So I'm gonna create a variable called myColor. And I'm going to set this equal to an object, and inside that object I'm gonna create a value that I'm going to call, let's just call it value. And we're gonna set it equal to a certain value, and the way we do that inside an object is we type colon, and then the value we want. Now I'm gonna put that in quotation marks and I'm gonna set this to a value of red. So we now have a variable with a value that we can point to, and the way we access that value is we point to the variable name, which is my color, and then dot and then the name of the property, which we called value. So we can change that value by saying myColor.value = "blue". So let's get rid of that for now, and I'm gonna create a function where we can change something. I'm gonna change the display of this text to reflect what that value is. So, I'm gonna call this function changeText. And in this function we're gonna point to that item, so var text = and we're gonna use jQuery to point to that text object which is simply a div with a class of text applied to it. And then what we're gonna do is we're gonna point to text and set its HTML property to a certain value. So we're gonna say text.html, and then inside parentheses we're gonna give it the value stored in myColor.value. Now, as you can see, this function is not doing anything yet because we haven't called the function yet. We've created the function, but a function will not run unless we actually tell that function to run. So up here underneath myColor, we could say changeText(); and now we can see our text down here has changed to reflect that new value. So now instead of changeText I'm actually going to call this updateColor, and we'll give it the same name here because we want it to start off with that color value. And then let's nudge this function down a little bit. What we're gonna do is, we're going to create a tween that's going to constantly update the text here based on this value, and we're going to be tweening that value from one value to another. So we're gonna tween it from red to blue, for example. And we're gonna do that using the ColorPropsPlugin, because again, with the ColorPropsPlugin, we can animate a color value of a JavaScript object. So again we're gonna point to TweenMax.to, just like we've been doing. Inside that, we're gonna point to the object we're animating. Now remember, this time we're not animating an object on the screen or in the browser window. Instead, we're animating a JavaScript object. I'm gonna animate the myColor object. Let's say we want this to happen over the course of three seconds, and then after that we'll have, just as always, our opening and closing curly brackets. So we'll nudge our closing curly bracket down a couple of lines. And then inside those curly brackets we need to first of all point to the colorProps plugin or the colorProps property, which is called colorProps with a capital P in Props. Colon, and then just like with our other plugins, we're gonna have another nested object inside curly brackets. So if we wanted to hit add easing or take easing away here, so ease is gonna be Linear.EaseNone. And then inside our ColorProps object, we're going to animate this value here to a different value. So, we're gonna point to that same value, and we're gonna animate it to a value of blue. So it's gonna animate from red to blue. Now it's running right now, but we can't see that it's doing anything, which is why I wanted to create this text field where we can update the text field and kind of see in the background what's going on. So one thing that we can do in TweenMax that we haven't really talked about yet is that we can trigger a function to run as this animation is occurring. So, when an animation occurs, it has a series of frames, and it runs through those frames at a certain frame rate. Just like as you're watching a movie, you're not really watching a moving picture, instead, you're watching a series of pictures placed one after the other. Those are separate frames. And as you flip those frames over and over again really fast, you start to see what seems like a moving picture. And that's the same thing that's going on here. So we have a series of frames, and what we can do in our tweens is, we can flip through those frames and cause those frames, as they update, to trigger a function. So, we can trigger this updateColor function over and over again as we're flipping through those frames. And so, we need to do that inside this main animation object but outside the ColorProps object. This is not a property that's specific to ColorProps, this is for any TweenMax animation you do. So outside the ColorProps object, we'll go to the next line here, and and the property we want to use here is called OnUpdate, with a capital U and then colon space, we're gonna point to the name of the function we want to call. Now, you'll notice this particular time, we're not putting parentheses at the end of this function call like we are up here. When you do it this way you don't need parentheses. Now as I've been talking, you probably noticed that we had an animation go on down here in the in the display area. It animated from a value of red to a value of blue, but as you can see, it's not using the original names that we gave it. It doesn't say blue here, instead, it has the rgba value for blue. So you can do this with any color format. So if we were to come back up here to red and change it to a hexadecimal value such as #f00, which is hex for red, we can see the same animation happening. So the ColorPropsPlugin will recognize any JavaScript property that can be interpreted as a color, and it can animate it from that value to whatever color value we put in here. So we could change this to maybe an RGB value of, I don't know, let's just put in some random numbers here. 59, okay. So we're animating from this value to this value. And our plugin is able to very easily do that for us. So what we're gonna do in the next lesson is, instead of just updating this text field, we're gonna update this radial gradient to actually display the colors that we're seeing. So, thank you for watching and I'll see you in the next lesson.