Jump to content


Problem adding a label at the beggining of a timeline

Moderator Tag

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


This is my first time using GSAP. For a pretty simple task, in theory.


I' using two timelines, with 2 phases. In each timeline, I animate the width. In the first phase, with a time «stime», While the first timeline is decreasing his width, the second, grows. In the second phase, with a time «btime», the first timeline increases his width, while the second, decreases. Well, there are two timelines, where they first grow in a direction, and later, they grow in the opposite direction, changing the time.


I have a pair of buttons, «+» and «-», where we can change the time used in each phase. The time of a phase only can be change when the animation is paused in that phase. If you pause the animation in phase 2 and try to change values of phase 1, it will be ignored. When you are in the correct phase and the time is changed, the animation is seeked to an initial position fixed for that phase. For this, I declared 2 labels, «work», and «rest», that represents each phase (this is for a Pomodoro timer, that's is the reason of that names).


Well, my problem is that this works with phase 2 («rest»), but won't with phase 1 («work»). I have tried with «seek», «tweenTo», even «set» and «restart». Anything appears to work. It get stuck in the position where it was when I hit the button, and starts from there in every new loop pass. I think that the problem is that time for label «work» is set to 0. Because I want to move at first position. I know that this should work, because I check other pens in the site and changed label to zero, and all work. But I don't know.


I have made a codepen with a «simplified» version, that shows my problem.


Any help will be welcomed.


Edit: I just saw again the title and thought it wasn't pretty accurate, but it seems that I can't change it now.

See the Pen jbPVPN by soulchainer (@soulchainer) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


Thanks for the demo. 

Unfortunately I am having a very difficult time understanding what you need to do or where the problem is.


My basic understanding is that you need an animation to play at a certain speed forward, and another speed playing in reverse.

I do not think you need to be controlling 2 timelines for this.


Here is a very simple demo that changes the duration of a single timeline when you change the direction at the end of a phase:




Also, I didn't really understand how the UI was supposed to work. Seemed I would hit the + / - buttons and nothing would change at times.

I really think it might help to see a simplified demo. 

  • Like 3
Link to comment
Share on other sites

Hi, Carl.


Thanks :D. That example helped me pretty much and I have now the codepen demo that I linked before behaving how I wanted it to :D.


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.



Edit: Almost forgot. This is for a FreeCodeCamp zipline. Basically, I'm supposed to mimic this codepen →

See the Pen RPbGxZ by GeoffStorbeck (@GeoffStorbeck) on CodePen

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

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.