[Toggle opacity by clicking on button]

HI,

thanks again, it works even if it's  more complicated than i thought, i guess i need to improve my knowledge both on JS and TweenMax.

Thanks a lot for your time, i really appreciate your kindness.

 

gio

[Toggle opacity by clicking on button]

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!

[Toggle opacity by clicking on button]

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

[Repeat a little function onComplete.]

Thanks, I have a lot to learn...

[Repeat a little function onComplete.]

HI, I'm really new to all this, I just looked at the 'Getting Started' video.

My question is: is this the right way to get that result (the blue line shrink from left to right in an infinite loop) or there is another/better way to achive this result?

At first i tried this code:

TweenMax.to(".light", 0.8, {left:0, delay:1.7, ease:Power0.easeOut});
TweenMax.to(".dark", 0.8, {left:0, delay:3.7, ease:Power4.easeOut});
TweenMax.to(".dark", 0.6, {width:0, left:500, delay:4.2, ease:Power0.easeOut});
TweenMax.to(".dark", 0, {left:-500, width:500, delay:5, onComplete:complete, repeat:-1});
function complete() {
	TweenMax.to(".dark", 0.8, {left:0, delay:2, ease:Power4.easeOut});
	TweenMax.to(".dark", 0.8, {width:0, left:500, delay:2.5, ease:Power0.easeOut});
	TweenMax.to(".dark", 0, {left:-500, width:500, delay:4});
};

But doesn't seems to works, it only works withouth:

repeat:-1

at the end of the line, and repeat only once.

I'm sure I'm missing something...

Thanks a lot

See the Pen yNeLJW by uomopalese (@uomopalese) on CodePen