[Reversing timeline animation and repeating it infinitely]

Thank you Jack, this is very clean and just what I was after! Originally I tried something a bit similar but failed miserably 

[Reversing timeline animation and repeating it infinitely]

Ok guys, I almost got my orbiting planets to work:

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

 

Everything seems ok if browser tab stays active. Reversing timeline rotations also works nicely if you click on the "sun".

 

But strangely enough, if you switch to other browser tab for a while (animation tab becomes inactive) the planets tend to come together and lose their position in the orbit. Is this a bug, expected behaviour or am I doing something wrong here?

[Reversing timeline animation and repeating it infinitely]

You guys are just amazing, thank you so much!

[Reversing timeline animation and repeating it infinitely]

Hi there,

 

I'm trying to create a simple infinitely looping animation with "planets" orbiting the "sun". The orbiting animation itself was a breeze with GSAP JS and bezier.

 

The problem I'm facing is the "infiniteness" of the orbiting animation when reversing the animation. I understand calling timeline.reverse() will run the virtual playhead from current point to the beginning and then stop. What I would like to accomplish is that after animation is reversed, the loop would continue again infinitely to the opposite direction.

 

You can see my current animation here:

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

 

If you click on the "sun" it reverses the main timeline animation and runs until it reaches the beginning. What should I do to keep the reversed animation going?

 

I'd appreciate any help on how to approach this.

 

Thanks for your great work, GSAP is amazing!