Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Edify Technologies

Negative timeline progress not working

Recommended Posts

Was that depreciated in gsap3?


Similar to my recent post, I'm working on bringing a slider based on OSUBlake's draggable infinity slider up to gsap3.


See the Pen veyxyQ by osublake (@osublake) on CodePen


In updateProgress() transform.x is usually a negative value, which is what's being passed to animation.progress(...). Looking closer, I didn't realize that progress will always compute to a positive number between 0 and 1. That logic makes sense and means I can just do the progress logic myself (something like const trans = transform.x > 0 ? (1 + transform.x) : transform.x;) before passing it to progress().


I think I had a general misunderstanding of the logic there and assumed it might be a bug in gsap3 since it worked that way in gsap2. 

Link to comment
Share on other sites

@GreenSock might be able to provide some insight, but I don't think it's necessary for GSAP to support a negative progress value. As you point out it can be worked around. Thanks for bringing it up!

Link to comment
Share on other sites

Ya, I don't think so either now that I understand it better.


Also, for anyone following along, I think the actual work around for this situation is something like this (not what I had above):

let transPerc = transform.x / wrapWidth;
transPerc = transPerc - Math.floor(transPerc);
const trans = transPerc > 0 ? transPerc + 1 : transPerc;



Thanks for the quick replies!

  • Like 2
Link to comment
Share on other sites

Yep, in v2 there was extra code to FORCE the value to be 0-1 but in v3 I eliminated that code for several reasons:

  1. To allow things to genuinely go negative, meaning the startTime of the animation could shift in a more flexible way (rather than always forcing the animation to be within range of the parent timeline's playhead)
  2. Less code = smaller file, less CPU cycles ;)

And you're absolutely right - it'd be easy to get the behavior you wanted with a little extra code. ?

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