background transparency only

[Fernando]

Hi,

I'm trying to change only the alpha of the background without affecting the color of the element.

I have 5 elements each with a different color, and I'd like to change only the transparency of all of them with a simple tween, like so:

 

TweenLite.to([bot0,bot1,bot2,bot3,bot4], .3, {opacity:0.85, ease:Cubic.easeOut});

But of course, that changes the opacity of the whole element and not only the background.

If I include the 'backgroundColor' property instead, I'd be altering the color as well.

 

Is there any way to achieve this?

 

Thanks in advance

[GreenSock]

I think you have 2 options:

1. Build your elements so that the background is a nested <div> (or some other element like that). Then you can easily tween the opacity and it won't affect the other content.
2. Tween each object's backgroundColor individually to an rgba() value so that it can apply opacity to the background color. Beware, however, that older browsers don't all support rgba() values. For example, IE8 (if I remember correctly). 

I'd personally opt for #1 if at all possible. 

[Fernando]

What I did is use a function like so:

 

bgChange($(this).find('div:first-child'));


function bgChange(cual){
   var str=cual.attr('id');
   TweenLite.to(cual, .2, { backgroundColor:menuColorIdle[str.charAt( str.length-1)], ease:Cubic.easeOut});
};

[kostjanix]

I think you have 2 options:

1. Build your elements so that the background is a nested <div> (or some other element like that). Then you can easily tween the opacity and it won't affect the other content.
2. Tween each object's backgroundColor individually to an rgba() value so that it can apply opacity to the background color. Beware, however, that older browsers don't all support rgba() values. For example, IE8 (if I remember correctly). 

I'd personally opt for #1 if at all possible. 

Hi Jack,

 

how would you do option 2? Can you supply an example please?

 

Thanks,

Sami

[jamiejefferson]

It would be as simple as

#black {
  background-color: #000000; /* rgba(0,0,0,1) */
}
#red {
  background-color: #FF0000; /* rgba(255,0,0,1) */
}

TweenLite.to("black", 1, { backgroundColor: "rgba(0,0,0,0)" });
TweenLite.to("red", 1, { backgroundColor: "rgba(255,0,0,0)" });

[Carl]

Just for a little assist, here's a demo illustrating Jamie's advice: http://codepen.io/GreenSock/pen/iucGo/?editors=001

[multivac]

Note that using :

"rgba( 0, 0, 255, 0.2 )"

 

instead of

"rgba(0, 0, 255, 0.2)"

 

Will not work.

[david_41980]

Note: The following does not work in IE8

 

I came across this just the other day, but the solution I was looking for would ideally not have me define the background colour in both the CSS and JavaScript. In the end I managed to solve it by using the "getComputedStyle" function, and then modifying the alpha value as required.

 

In my scenario I was trying to fade in the background:

#el {
    background-color: #000;
}

var $el = document.getElementById('#el'),
    bgColor = getComputedStyle($el)['background-color'],
    fromBgColor = bgColor.substr(0, bgColor.length - 1) + ', 0)';

TweenLite.from($el, 0.3, { backgroundColor: fromBgColor });

For this to work I'm working on the assumption that "getComputedStyle" will return me an rgb string for the background colour. I'm currently trying to figure out whether this is a safe assumption to make.

[Learning]

Note that using :

"rgba( 0, 0, 255, 0.2 )"

 

instead of

"rgba(0, 0, 255, 0.2)"

 

Will not work.

 

OMG... This saved me. I almost wanted to rewrite the whole logic because I can't figure out why it's buggy and works randomly.

[determin1st]

I'm using 'className' to animate background-color from HEX value to TRANSPARENT. but it goes GRAY at some point.

 

Is there any solution to this? Should I use HSL or RGBA color? Im also traped with LESSCSS, it coverts HSL to HEX value(( oh, too late now, need to sleep, kek.

[GreenSock]

Hi @determin1st. I'm generally not a big fan of className tweens, but there's nothing "wrong" with them. It's just that when you're more surgical by defining exactly which properties you want to animate, it's more efficient (and I'm a performance nut). 

 

Do you have a codepen demo of the problem you're having? That'd sure help a lot. Just the simplest form of it, even if it's one div and one tween. 

 

And yes, under the hood, GSAP typically converts things to RGB or RGBA to do the tweening, but it is possible to use HSL/HSLA instead if you prefer (though that typically involves animating a string and applying it dynamically in an onUpdate). Once I see your demo, I'll be in a much better position to offer advice. 

[determin1st]

Oke, thanks Jack. I will try to implement RGBA. Im using className to have more control over styles (no change of code, separate concern), so its not a option for me. Color animation looks like:

 

.default {background-color: #123456;}

 

to

 

.faded {background-color: transparent;}

 

what is the best values for these you think? (to fade only transparency, not actual color, because as i noted it goes GRAY and *flashes* at some point)

Optimisation, yes yes, have a lot of questions about... but not yet come to a question...

 

 

 

 

 

 

[Carl]

Hi determinist,

 

Please provide a demo we can look at it. It shouldn't take you more than 5 minutes.

Much better if you can show us exactly what is happening than for us to build something up from scratch and hope it simulates what you see.

Thanks!

 

 

[determin1st]

1 hour ago, Carl said:

Hi determinist,

 

Please provide a demo we can look at it. It shouldn't take you more than 5 minutes.

Much better if you can show us exactly what is happening than for us to build something up from scratch and hope it simulates what you see.

Thanks!

 

 

 

 

See the Pen mXLKEb by determin1st (@determin1st) on CodePen

 

Hello, see, here (in the Pen) it goes GRAY and then goes to WHITE. I suppose, I have to use RGBA() start color and not HEX/RGB/HSL to fade it normally (avoid gray), right?

 

 

 

[PointC]

It goes gray because the body background is white. The blue is fading out and the white is starting to show. It's starting to mix with the underlying color. If the body was red, the blue fade would appear purple as it changes to transparent.

 

See the Pen yvjqRW by PointC (@PointC) on CodePen

 

Happy tweening.

 

[Carl]

Thanks for the demo! Looks nice and its super helpful.

 

When you use the "transparent" keyword in GSAP it actually animates to rgba(255, 255, 255, 0) which is kind of like invisible white.

 

below is a demo comparing animating to transparent vs rgba using your color and alpha 0.

 

See the Pen MQGBZN?editors=0110 by GreenSock (@GreenSock) on CodePen