Thanks . That example helped me pretty much and I have now the codepen demo that I linked before behaving how I wanted it to .
Now, I will try again to explain what is this supposed to work (and how now it works).
- This is for a pomodoro clock.
- There are now only one timeline (previously 2). The idea is that the first bar fills while the second goes empty, with the same time. Then, they do in reverse, with a different time.
- Each bar in the demo here, in the original code are four elements, each of what changes to diferent width percentages, in a queue (one after other, not simultaneously). Imagine that each bar is instead a block and their behaviour is the same that the bars. Originally, I felt that it would be easier to use a timeline to control each phase (one for straight and other for reverse), but it seems I ended making everything harder to me xD. Now, in a few minutes, I solve one thing that take me ages to figure in the other way. Without some extra variables I was using before, etc.
- The purpose of the + / - buttons is increase/decrease the time of "working"/"rest" phase. You can only use them with the timer paused. You only can change your work time when you're working. And the same goes for your rest time (well, in fact, I should modify this last one, for allow changed it when the user still don't press the play button for the first time).
- And, when you change the work or rest time, the paused animation seeks to the initial state predefined for work or rest. If you are in your work time with animation paused, you change that time, the animation refills the work bar and empties the rest bar (you have again all the work to do and still doesn't have any time to rest). And viceversa
- The problem I had was that all worked, but the work part. When I changed the work time, the animation was freezing in their actual position, instead of return to their base position. And anything I was trying worked.
Now, the problem is solved. You can check the codepen, if you like, to see it (only have to do that thing I said about allow initial change of rest time values).
Hope it still going well when I apply this to the original code. Or you will see me here again asking things :þ.
And also hope my english didn't bothered you too much. THANKS, Carl.
Edit: Almost forgot. This is for a FreeCodeCamp zipline. Basically, I'm supposed to mimic this codepen → http://codepen.io/GeoffStorbeck/full/RPbGxZ/ , without pry the code and bla bla bla. I am trying a different approach, because just doing exactly the same is kinda boring. I'm not a robot. And, that way, I wouldn't be learning some GSAP at the same time, for example .