Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
fs_tigre

How to toggle alpha when a button is clicked

Recommended Posts

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.

Link to comment
Share on other sites

Thanks a lot! 

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

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

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