Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Animate Between CSS Classes with GreenSock

    John LindquistJohn Lindquist

    GreenSock enables you to animate between classes defined in your stylesheets using the className syntax in your tween properties. This lesson walks you through using the mouseover/mouseout and mousedown/mouseup events to add and remove css classes based on the specific event.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    Instructor: 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.

    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.

    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.

    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.

    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.

    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.

    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.

    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.

    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.