How to toggle alpha when a button is clicked

[fs_tigre 0 Likes (Newbie)]

Hi,

 

Is it possible to check the current alpha of an element in GSAP?

 

In other words I have a button that when clicked it changes the alpha of an element to .5 and I would like to be able to toggle the alpha from 1 to .5.

 

Something like...

function clickEvent{
 if(alpha == .5){
   TweenLite.to(".someElement", 1, {alpha: 1});
 }else{
  TweenLite.to(".someElement", 1, {alpha: .5});
  
 }
}

How is this typically done? Does GSAP has some property to check the opacity of an element or it needs to be done in pure Javascript?

 

Thanks a lot.

[OSUblake 18,475 Likes (Superhero)]

How do you normally check the alpha?

 

I think you might be thinking of opacity, unless you are using some type of canvas. 

 

See the Pen 693c004bf6b8825c619db7f4d10142f8 by osublake (@osublake) on CodePen

[fs_tigre 0 Likes (Newbie)]

Thanks a lot! 

var tween = TweenMax.to("#content", 1, {alpha:.3}).reverse();
function toggle(){
   tween.reversed(!tween.reversed());
}

[OSUblake 18,475 Likes (Superhero)]

That's weird. Has alpha always been part of the CSSPlugin?

[fs_tigre 0 Likes (Newbie)]

I don't know but I remember trying it when GSAP first came out.

[OSUblake 18,475 Likes (Superhero)]

Yeah, I was kind of shocked to see that it worked. I just assumed it wouldn't work because it's not a CSS property, but now I see it in the source code of the CSSPlugin.

[Carl 11,108 Likes (Superhero)]

Yeah, alpha came from ActionScript. We wanted to make migration as easy as possible so we left it in there. 

[OSUblake 18,475 Likes (Superhero)]

Makes sense. Glad I found this out because I have always wanted to use that term for opacity.