How can I turn on the opacity for a period of time and then turn it off in the same timeline?

[Elindo]

For example I have this, but the opacity only turns on.

 

var extend = gsap.timeline({paused: true});
extend.to(sola, {opacity:1, duration:5, opactiy:0, ease: "none"});

 

Could it also be that the timeline isn't isolated from the other timelines?.. I asked because when I press one button, some of the lines that are supposed to disappear are still showing from the previous timeline. 

 

I have 4 timelines with a series of movements and opacities that should respond to specific buttons, 

 

 

 

See the Pen xxrbWyY by Elindo586 (@Elindo586) on CodePen

[PointC]

In cases like this where you have 4 timelines targeting many of the same elements, your safest bet is to use a .fromTo() tween. 

https://greensock.com/docs/v3/GSAP/gsap.fromTo()

 

This article on conflicting tweens and overwrites should also be helpful.

 

You'll also probably want to either restart() your timeline on click or play(0). 

btna.onclick = () => extend.play(0);

 

[Elindo]

Thanks!!!

 

I think the overwrite:true  will help on some of the conflict.

 

As far as turning the opacity off, I wrote another line in the same tween after turning it off after a few seconds of turning it on.

 

extend.to(aline1, {opacity:1}, "-=5");
extend.to(aline2, {opacity:1}, "+=5");
extend.to(aline1, {opacity:0}, "+=01");

 

The timing still pretty bad, so I need to study how to adjust it to turn them on and off in relation to the movement of cylrod on top.

 

This coding thing is taking longer than I was thinking, but if I get to work through some of these rules I would be able to do animate a few more circuits.. 

 

 

 

 

 

[PointC]

Another option would be a yoyo tween.

gsap.to(yourTargets, {
  duration: 1,
  opacity: 0,
  yoyo: true,
  repeat: 1,
  repeatDelay: 1,
  ease: "none"
});