object following svg path around more than once

[Guest]

Hi all,  I'm trying to make an object move around a track using the svg path.  It works nicely until it gets to the end of the first lap (which is an oval).  I have to use the progress parameter which is updated every second from elsewhere.  I can't see a way to move from the first lap to the next because once progress is >= 1 then the object stops at the end of the first lap.

 

What I have so far is producing inconsistent results when it transitions from the end of the first lap to the start of the second.

 

Is there a recommended way to get a smooth animation as the progress continues beyond the first lap?

 

Any help much appreciated.

 

Codepen attached.

 

Thx.

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

[OSUblake]

Repeat...

var tweenTrack = TweenMax.to("#arrow", 1, {
  bezier: {
    type: "cubic",
    values: arrayPath,
    autoRotate: true
  },
  repeat: -1,
  paused: true,
  ease: Linear.easeNone,
});

[Guest]

Thanks, I forked again and added the repeat but the arrow is accelerating now for some reason.  I guess something needs resetting somewhere?

 

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

[OSUblake]

Just use totalTime instead of progress. You set the tween's duration to 1 second, so that will translate nicely to a progress percentage. I used delayedCall instead of setInterval so that the timer is synced to GSAP.

 

See the Pen MaNrMR?editors=001 by osublake (@osublake) on CodePen

[Guest]

Ah totalTime was the key!  Thanks so much - I've been tearing my hair out with this problem.