Jump to content


Infinite caveat regarding timeScale

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

Hello again,


I'm back with another issue I'm facing.

I am aiming to have a background that moves to give the impression of the sprite movement (essentially moving the viewport but not). To achieve this I have made repeating Tweens which move from one side of the page to the other and put them into timelines for X and Y. To get a feeling of speed I have been messing with the TimelineMax timeScale. The issue I have found is that going up (-ve timeScale) soon results in the timeline reaching progess = 0. This is likely to be an issue travelling left also.


I have had a look at a similar topic here: 

however this has not worked well for me. I believe this is because I am not calling reverse(), rather I'm using negative timeScale. 


Does anyone know a fix for this that will work well, and is there a better way I should be doing this which would make it easier to repeat etc..?



Thanks for your help



See the Pen LjXNbq by anon (@anon) on CodePen

Link to comment
Share on other sites

Hmm, not really sure what you need help with. I don't think I understood the description and the demo was way to complicated for me to dive into (300+ lines of code).


Whenever someone wants something to repeat and loop seamlessly I think of using the ModifiersPlugin as shown in the thread below







I don't think there are many cases where I would recommend using a negative timeScale, but again I'm not clear on the issue.

Perhaps you can make a super simple demo 10-20 lines of commented code that clearly illustrates the issue and then we can take another look.





  • Like 1
Link to comment
Share on other sites

Hi Carl, thanks for your reply.  I have attempted to cut down the code, please take another look at the codepen. Notice that within say.. 10 seconds, all the white points stop tweening (I believe they're at y=0/viewport height). I wish for them to loop (from top to bottom in this demonstration) infinately. The use of timescale allows a really nice effect of speed and direction. This other post you have shared looks interesting. I'm unsure if it's useful to this situation at the moment but I'll look into it.





Link to comment
Share on other sites


Ok, I think I may understand it a little better now. If the core problem is that you eventually hit a progress(0) you should be able to initially set the infinitely repeating timeline's progress to something ridiculous 1 week into the future and then the progress will never get as low as 0. You would want to put some reasonable limits on how high or low the timeScale can be set. For instance don't let the user do something to set timeScale(-100)


It seems your demo is throwing some errors in some browsers and its changed a bunch since the original was posted. Its best to fork the demos when making revisions.


However, just add something like 

timelineX.progress(604800) // start timeline 1 week into the future


Should get you far enough into the timeline so that you never get to the beginning.

  • Like 4
Link to comment
Share on other sites

Wow! GSAP now has a time travel feature? Is there anything this platform can't do? I suppose we now have to be careful about accidentally creating a paradox while animating. :lol:


Clever solution @Carl


  • Like 5
Link to comment
Share on other sites

@PointC it's okay. Just make sure we travel forward in time, not back!


@Carl I have set the progress to 50%, and it seems to be working well. An issue is that at timeline near 0 it looks a bit funky, but hopefully the users won't be going full speed ahead in the same direction for > 40 years!!


Thanks for your help!

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