color animation

[Fernando]

Hello,

 

I', trying to make an animation of a DIV which moves on mouse over, and I wanted to change opacity of the background only.

 

Here's what I'm doing to move the object.

 

clipTween= TweenLite.to(bot1, .2, {css:{top:"-192px"}, ease:Cubic.easeOut, paused:true});

This works ok, but when I add the colorProps, just stops working alltoghether.

I've tried everything.

 

Any help would be much appreciated.

 

Regards,

Fernando

 

[GreenSock]

Can you show us the code you're using for the colors? You shouldn't be using the ColorPropsPlugin for css-related colors - those get handled directly by CSSPlugin. And with the latest version of GSAP, you don't even have to use the css:{} wrapper (although you're welcome to):

 

TweenLite.to(bot1, .2, {top:"-192px", backgroundColor:"rgba(255,0,0,0.5)", ease:Cubic.easeOut, paused:true});

Just beware that old versions of Internet Explorer don't recognize rgba() colors. As far as I know, it's impossible to have a backgroundColor with partial opacity in IE8 or earlier. 

 

If you're still having trouble, please post a jsfiddle or codepen link where we can see your code in action. 

[jeff4gee]

I have had luck with using the hex color when changing the background color. I develop for IE8 so I know that this method works in that browser as well as others.

 

TweenLite.to(bot1, .2, {top:"-192px", backgroundColor:"#FFF", ease:Cubic.easeOut, paused:true});

[Fernando]

I figured it out using this:

 

TweenMax.to(bot0, .2, {css:{top:"-192px", backgroundColor:"rgba(172, 221, 255,.85)"}, ease:Cubic.easeOut, paused:true});

I need that transparency, so I'll check what it looks like in ie8.

 

Thank you.

I'll remove the css wrapper.

[jamiejefferson]

Hmm jsfiddle and codepen don't really work in IE8 (how annoying), but this fiddle might offer workable solution for requiring opacity for the background-color only. Because of reasons I haven't tested this in IE8, but I recall doing something like it in the past and I'm fairly sure it works.