Jump to content
Search Community

Toggle opacity by clicking on button

uomopalese test
Moderator Tag

Go to solution Solved by Diaco,

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 really new to all this and this is my second post.

I'm trying to do something I thought was simple, but something does not work.

I have two div (#red and #blue) and two buttons (#opacity1 and #opacity2), clicking the first button will increase the opacity of the first div while decreasing the opacity of the second div and vice versa.

The code I'm using doesn't seems to work, can someone help?

Thanks

 

UPDATE:

There's an error in the code, sorry!!!

.to("#blue", 0.1, { opcity: "+=0.1" }, "0");

should be

.to("#blue", 0.1, { opacity: "+=0.1" }, "0");

(opacity instead of opcity) and now seems to works.

Anyway, am I doing this correctly? or there is a better way?

Thanks.

$('#opacity1').click(function() {
  var tl1 = new TimelineMax();
  
  tl1.to("#red", 0.1, {opacity: "-=0.1" }, "0")
  .to("#blue", 0.1, { opacity: "+=0.1" }, "0");
});
$('#opacity2').click(function() {

  var tl2 = new TimelineMax();

  tl2.to("#red", 0.1, {opacity: "+=0.1" }, "0")
  .to("#blue", 0.1, { opacity: "-=0.1" }, "0");
});

See the Pen VLKjzL?editors=011 by uomopalese (@uomopalese) on CodePen

Link to comment
Share on other sites

Hi uomopalese  :)

 

try this :

 

var Op = 5 ;
$('#opacity1').click(function() {
  if(Op<10){ Op +=1;
    TweenLite.to("#red", 0.1, {opacity: "+=0.1" });    TweenLite.to("#blue", 0.1, { opacity: "-=0.1" });
  }
});

$('#opacity2').click(function() {
  if(Op>0){ Op -=1;
    TweenLite.to("#red", 0.1, {opacity: "-=0.1" });    TweenLite.to("#blue", 0.1, { opacity: "+=0.1" });
  }
});
  • Like 1
Link to comment
Share on other sites

Hi Diaco.AW :)

thanks for your answer, this forum is unbelievable!

I tried your code and it works fine, but if I increase the duration of the tween, eg:

TweenLite.to("#red", 0.5, {opacity: "+=0.1" });

the behaviour changes, the divs doesn't desapear completely (if i click quickly).

Is there a reason for this? I wouuld like to add some easing effects on the clicks (i updated the codepen with your code).

Thanks a lot!

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