Revert back to original css setting, question.

[joshdickens]

Coming from AS3 this was super easy - I just set to "undefined" and it would feed me back the original value.

 

Here's my example based upon that statement - it's self explanatory.

if (isMouseOver)
{
    	TweenMax.to(column.parent(), 1, {css:{backgroundColor: "#ba0000"}, ease: Power3.easeOut});
}
else
{
       TweenMax.to(column.parent(), 1, {css:{backgroundColor: undefined}, ease: Power3.easeOut});
}

But when I roll off the div it just makes the background color black instead of reverting back to it's original color.

 

Any help would be awesome! I miss AS3 - all this JS/CSS/HTML is a lot more typing. Feels like taking 2 steps backwards honestly - but a necessary evil, I suppose.

 

Thanks - Josh.

[GreenSock]

Hm, I don't think AS3 restored the original value if you set "undefined", but maybe I misunderstood. Oh, I bet you meant tint or something, thus if there were no tint (null ColorTransform) on an object, it'd show its native color. Anyway, when you set the backgroundColor, you're setting the real backgroundColor, not some sort of filter on top of a natively-different-colored thing. 

 

You can store the original color in a variable and feed that into the 2nd tween if you want. Or maybe just use 1 tween and flip-flop the direction of it...

var colorize = TweenMax.to(column.parent(), 1, {backgroundColor:"#ba0000", ease:Power3.easeOut, paused:true});
//...then later...
if (isMouseOver) {
    colorize.play();
} else {
    colorize.reverse();
}

Note: you don't really need to wrap things in a css:{} object if you don't want to. GSAP will automatically do that for you if the target is a DOM element and you've got CSSPlugin loaded. 

 

I know it's tough to let go of AS3, but trust me - you'll eventually get comfortable with JS and love it