Jump to content

G. Scott

Reverse Loop using 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

OK, thinking there may be a better way to do this.


Have an image moving across the screen left to right and being controlled with cursor position relative to containing div. The further right, the faster the image moves left. The further left, the faster the image moves right. All of this as an endless loop.


While working on the left to right movement/speed etc, I discovered that plugging in negative values to the timeScale of the tween resulted in it moving in the opposite direction! EXCELLENT! Saved me some math:-)


Anyway, the only caveat is that it will not loop past the beginning point. So if we allow the movement to loop left to right 5 times and then reverse direction, it will only loop back the other way 5 times and then stop at the original starting point. Basically can't move right to left until we've moved left to right (makes sense but bummed me out).


So for the halibut, I set the seek to a huge number (28800 = 8 hours) when I initialize the tween and POW! I was in business. Unless someone were to mouse over the right side for 8 hours, it will never stop... this is exactly what I was going for.


But I was just wondering if there was any drawback to this or a better way. As it is, I've accomplished everything with just a few lines of code. Any advice?


Link to comment
Share on other sites

Hello G. Scott, and Welcome to the GreenSock Forum!


To get a better grasp of what you are dealing with.. can you set up a codepen example so we can see your code in context.


Here is a nice video tut by GreenSock on how to create a codepen demo example.


We love code we can edit and test live, to better assist you :)

  • Like 1
Link to comment
Share on other sites

Hi G. Scott  :)


as Jonathan mentioned ; pls make a reduced Codepen Demo available ;


i think this can help you :

anim.reverse().eventCallback("onReverseComplete", function(){anim.reverse(this.duration())});

you can do something like this  :


See the Pen lyCKp by MAW (@MAW) on CodePen

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.