Jump to content
Search Community

Tweening progress of Timeline, relative value

smrdn test
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

Hey guys,


I'm trying to animate the progress of a timeline with relative values.

I have recreated the basics in this pen:

See the Pen rwBzn?editors=001 by anon (@anon) on CodePen


The problem is:

I was under the impression that multiple clicks would basically add up, since GSAP analyzes if there are other tweens running. However, when you quickly click the button you will be able to leave the animation in an unwanted state (progress % step != 0).

Does anyone have an idea what I'm doing wrong? I'm pretty sure I just missed a part of the documentation.


Thanks in advance!

Link to comment
Share on other sites

in your example duration = 1, so I'm not so sure what the purpose of multiplying step * duration is as that will always be the value of step.


So lets remove that from the equation entirely and just talk about doing 

step = 0.1

{progress:"+=" + step}

That means that every time you adjust the current progress() of the timeline it will add 0.1 to the current value.


So if progress() returns 0.2 when you click, it will then tween to progress:0.3. very good.


However, if you click WHILE the tween is running and progress() is currently 0.25 (mid-tween) well 0.25 + 0.1 is going to be progress:0.35.


make sense?


If you want to make sure that you're progress values are always intervals of step. You can do something like this:


//create a variable to track how many steps/clicks
var stepCount = 0;
var step = 0.1;

$('#progressButton').on('click', function() {
  //stepCount * step will always be interval of 0.1
  TweenLite.to(tl, 1, { progress: (step * stepCount), ease: Quint.easeOut, onUpdate: function() {
    progressLabel.innerHTML = tl.progress();



You will notice that this does not use relative values, but I don't think those are the best solution for what you are trying to do.

  • Like 1
Link to comment
Share on other sites

Thanks for the quick reply Carl.

I have the feeling that my example pen was too abstract.

The duration was a mere example (could've been 3.5 or whatever).

I have created a more realistic pen of what I'm trying to build:

See the Pen ILalC?editors=001 by sebh (@sebh) on CodePen


I havent disabled overflow so you can see the full animation. It's basically nothing more than an infinite slider. Which can be controlled by dragging and two buttons.

I simply cannot get the behaviour right. The dragging works great. But I can't simulate the infinite scrolling with the buttons. Internally, progress values above 1 or below 0 are converted back to 0 <= progress <= 1 it seems. So if I were to just increase selectedElement forever, the animation would still just start all over again once it reaches the end.


Edit: Just realized that I forgot to update selectedElement in onDrag. Since it's not that important, I'm leaving the code as it is.

Link to comment
Share on other sites

ah, that makes more sense.


Thanks a ton for updated pen, very helpful and very cool.

Love how you got the infinite dragging working.


I put a simple console log at the very top of your #next click function

console.log(selectedElement * elementWidth / maxDrag)

And these are the values that were generated (which are being used for the progress() tweens)




Of note are the last two values.

When you tween from progress:0.88888 to progress:0, the timeline is going to play backwards.


From what I can tell you need to adjust your calculations to account for the following:


  • When the progress is 0.88888 your next tween needs to tween forward to a value of .99999 or most likely 1 should suffice.
  • When that last tween ends, the timeline's progress needs to be silently and immediately reset to a progress of 0.


When hitting the next button repeatedly, the progress needs to be 0 before tweening to 0.1111 to avoid that backwards animation.


Make sense?

Link to comment
Share on other sites

Absolutely, thanks a lot.

I've tried that over the weekend (on the "real" code) actually, couldn't get it to work though.

The problem was that multiple clicks would result in weird behaviour.

Now that I think about it. This "weird behaviour" is actually quite hard to explain.

I'll come back to you with an updated pen.

Link to comment
Share on other sites

I've created an updated pen:


The "infinity part" is working great now. There is one slight problem though.

In the previous version, the Draggable was updated in the onStart callback. The result was that when you grabbed the slider while it was moving from a button click, it jumped a little bit when the animation wasn't quite done (that makes sense I hope).

I tried to put the Draggable updating part in the onUpdate callbacks. However, there still is a little "jumping" plus, you can't "spam" the buttons anymore (feels like overwirte "none").

If I remove the Draggable updating from the onUpdate callback, you can perfectly spam the buttons without breaking anything - but the "jumping" when you start dragging while the animation is running is even greater.


Edit: Got some seriously bad math in there. Sorry for that!

Edit2: I'm working on fixing this nonsense.

Link to comment
Share on other sites

Here's the updated pen:

See the Pen bfIzy?editors=001 by sebh (@sebh) on CodePen


To visualize the "drag while animation running" problem, I've implemented two animations.

Clicking the next button will immediately set the Draggable proxy to the target destination. Clicking the previous button will update it while the animation is running.

As you can see, neither works perfectly.

The other problem is that, when you spam the buttons, you will see a slight jump in the animation. That happens because of the "silent set" I put in.

If I move said set to after the animation and you spam the buttons, you will see the backwards movement again, simply because the first set hasn't been called when you click again.


Edit: I've also changed the progress calculation in the onDrag method. There's no need for infinite repeats anymore.

Link to comment
Share on other sites

Congrats on the progress. Things seem to working much better.


As for that little jump that occurs when you start dragging, I'm really not sure, and I don't think I could really track it down without making a considerable time commitment. 


What I would suggest though is that you log as much data as possible on every interaction so that it will be easier to see where things may be amiss.


I created a fork for you: http://codepen.io/GreenSock/pen/HBabo


Which includes a getData() function that shows the draggable.x and tl.progress on a number of events like onDragStart, onDragEnd, onPress, onComplete.


Give it a whirl and watch the console. From what I can tell it appears that the values are pretty much what I would expect and I haven't yet been able to account for that jump. I think you will have a much better time knowing what values are important at each stage.


It seems clear though that next and previous do what they should very well, and dragging works great... its just the getting them both to work together part.

  • Like 1
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...