Animate Between CSS Classes with GreenSock

Instructor: [00:00] I'm going to create a div. I'll create element-div, and we'll just reference this as a box. We'll set an attribute on the box where the class is just simply box and then go ahead and add it to the body. Append child box.

[00:21] In our CSS, I'm going to create that box class. We'll say width 100, height 100, and background color can be red. When I refresh, I should see that box show up.

[00:38] I'm going to create two more classes -- one is going to be hover class. This will simply be a box shadow with none-to-the-right and then one-ram-down then one-ram-of-spread. We just want to see that real quick.

[00:55] It looked like this, so you see that. Then another class of down, and this will be a background color of blue. I'll make sure to remove that and we're back to star-red-box.

[01:12] We can use these hover and down classes inside of TweenMax. We'll say box add event listener, mouse-over. Inside of this event, we can say TweenMax 2, take the box, say in .25 seconds.

[01:31] We want the class name to be Hover. We'll see what this does when I refresh. Hover kind of disappeared and you saw a shadow for a split second.

[01:46] What we want it to do is append the class, so we'll do plus equal Hover, which means that it'll add that class and tween to it. You can see when I mouse-over, it adds that class.

[02:01] We can do the opposite and paste that. We'll say mouse-out. This one will be minus equal Hover. Refresh, mouse-over, mouse-out, mouse-over, mouse-out. Then we'll do the same thing for those down states.

[02:22] I'll say this one is mouse-down. This one is mouse-up, class name plus equals down, class name minus equals down. Now when I refresh, and I hover and mouse-down, it turns blue. Mouse-up, it turns red. Out, in, down, up. Out, in, down, up, out.