Basic Animation with Greensock's TweenMax

Lucas Ruebbelke: [00:01] Hello, this is Lucas Ruebbelke, and in this screencast I am going to show you how to create a JavaScript animation using AngularJS and TweenLite from the GreatSock animation platform.

[00:16] What we have here is a list of menu items that we're going to actually be animating when you roll over and roll out. In the HTML, we have an array of menu items on the controller that's laying out the actual menu. I've created a menu item directive that has an active property on scope that we're actually using to keep track of whether or not the mouse is over the menu item or not.

[00:50] Then i've created the start of an animation called "Menu Animation" that we're going to be filling out as we move along through the video. We are going to be using ngClass to trigger the animations. When this highlight class is added, we're going to do something, and then when the highlight class is removed, we are going to do something different.

[01:16] In the HTML we're using ngRepeat to iterate over the menu array and lay out our menu. You can see here that we are attaching the menu item directive, and we're using mouseenter and mouseleave to toggle the active property to true or false. This is what is actually triggering the animation. Highlight is being added when active is true, and it's being removed when active is false. Then we have the menu animation here in class so that Angular knows to apply the animation that we've actually defined, by adding this menu animation class to our element.

[01:58] The first thing that we need to do is actually add the GreenSock JavaScript file to our page. If you hop over to the GreenSock site and click the "Get JSAP" button, you're going to get a pop-up, and you can choose JavaScript. Then we're just going to go ahead and highlight the script tag here. We'll jump back into our HTML and paste this at the bottom.

[02:30] We've actually included TweenMax. There's a lighter version called TweenLite, but when you include TweenLite you actually have to include the optional plugins one by one. For this case we're just going to use TweenMax. It's just the full featured big brother to TweenLite.

[02:49] Now jumping into the actual animation, it's time for us to start actually adding in our JavaScript animation and get things moving. We're going to use TweenLite, and we're going to use the two method. This takes a few parameters, the first one being the actual element that you want to animate on.

[03:11] The nice thing about ngAnimate is that it actually gives you that element in as a parameter to the before class and before removeClass, so you don't actually have to look for it. Then we are going to set a Tween duration. Then we are going to create an object that has the properties that we want to animate on.

[03:35] To start out with, we're just going to set the width to be 200. One of the things that's really important is we do need to call "Done" on complete, and then we are going to just paste this into the removeClass block, and just change this back to 160. Let's see what this looks like.

[04:06] Now you can see when I roll over this is it is expanding the width to 200, and then when I roll out is it's setting it back to 160. That was pretty easy, but what if we want to actually animate over other properties? Let's say we wanted to actually change the color. That is also pretty easy. Let's set color to something green. Let's do 8925, like so. When we roll back over, or when we roll out, let's go ahead and set this back to just a gray. Now you can see that it's actually changing the test color to green.

[04:59] Let's keep on with this example and just extend this just a little farther. Let's do something a little more complex. Let's actually animate the border left property. We're going to convert this into CamelCase, and let's set this to 20 pixels, we'll set it to solid, and let's set this to be the same color as the green text that we set up above.

[05:29] Down here we'll just go ahead and set this back to 10 pixels, solid, and this we'll set it to a dark gray. Now you can see that not only is the color animating, but the border is animating as well. That's pretty neat. Let's just do one other thing, just visually that I think it's interesting. We will go ahead and set the duration on the remove to .4 seconds instead of .2. What this is going to do is create a neat, latent fade out, so you can see that, as I roll over, is you get this trail of the items are actually fading out faster than they've animated in, which is pretty neat.

[06:26] Let's just review what we've done so far. We've included the TweenMax library. Then, using the two method on TweenLite, we are animating on the element for .2 seconds when highlight is added and .4 seconds when it is removed. We have an animation object with properties that we want to animate on. We are simply modifying width, color, and border left, and then on complete we are calling the done callback to let AngularJS know that something has happened, or that it can actually move on and clean itself up.

[07:06] Let's see this animation one more time, refresh the page. When you roll over you get this nice, smooth, clean effect. Stay tuned for more videos on this topic. I will catch you next time.