Jump to content
Search Community

Animate backgroundColor rgba strange behavior.

lovezjk test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi !

 

I try to animate a backgroundColor from rgba(0, 0, 0, 0) to rgba(0, 0, 0, 0.65).

Behavior expected : tweenlite would tween alpha parameter only (rendering grayscales fading hover other layers).

 

Behavior seen : tweenlite tweens red, green, blue and alpha parameters.

See codepen : hover firebug inspector on .red to track it, then hover in/out the button.

 

Notice that when tweening from 0.65 to 0, the behavior is correct.

 

@+

See the Pen wBZBVz by anon (@anon) on CodePen

Link to comment
Share on other sites

Thanks for the demo and clear instructions, very helpful.

 

It appears that FireFox automatically sets and reports rgba(0, 0, 0, 0) as transparent.

 

This image is taken from a pen with no GSAP code, just css:

http://i.imgur.com/KTvHlGX.png

 

If GSAP is told by the browser that a color is transparent, it has no idea what the rgb values are (which is unfortunate). Is it transparent white? or transparent black? or some color in between?

 

I found that setting backgroundColor : 'rgba(0, 0, 0, 0.01)' with GSAP helped get around this in FireFox (chrome didn't have this issue).

 

$("#restart").hover(function() {
  fx.fromTo('.red', 1, {backgroundColor : 'rgba(0, 0, 0, 0.01)'}, {backgroundColor : 'rgba(0, 0, 0, 0.65)'});
}, function(){
  fx.to('.red', 1, {backgroundColor : 'rgba(0, 0, 0, 0)'});
})

Does this work for you? http://codepen.io/anon/pen/yyrNZQ?editors=001

 

it appears the r, g, and b stay stuck at 0 throughout the tween.

  • Like 3
Link to comment
Share on other sites

Your right Carl, Firefox MDN states that computed value  for transparent is rgba(0,0,0,0)

 

Computed value If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).

:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-color

 

Nice workaround Carl :)

  • Like 2
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.
×
×
  • Create New...