Jump to content


color animation

Recommended Posts



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.





Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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});

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.