Jump to content
Search Community

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

Elindo test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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



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);


  • Like 4
Link to comment
Share on other sites



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






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