Reverse Loop using timeScale()

[G. Scott]

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?

 

THANKS!

[Jonathan]

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

[Diaco]

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