Jump to content
GreenSock

Fernando

background transparency only

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'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

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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});
};
Link to comment
Share on other sites

  • 1 year later...

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

Link to comment
Share on other sites

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)" });
  • Like 1
Link to comment
Share on other sites

  • 1 year later...

Note that using :

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

 

instead of

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

 

Will not work.

  • Like 2
Link to comment
Share on other sites

  • 1 month later...

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.

Link to comment
Share on other sites

  • 9 months later...

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.

Link to comment
Share on other sites

  • 1 year later...

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.

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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...

 

 

 

 

 

 

Link to comment
Share on other sites

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!

 

 

Link to comment
Share on other sites

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?

 

 

 

Link to comment
Share on other sites

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.

:)

 

  • Like 3
Link to comment
Share on other sites

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

 

 

 

 

  • Like 5
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.
×