Pfthb

I have a GSAP (Greensock) animation that is "seemless," meaning that when it is played on an infinite loop you can't tell which part is the beginning, and which is the end.

Let's say I have two labels, one near the start (about 10% of the way in) and another near the end (around 90% completed):

| start end |
|----|----|----|----|----|----|----|----|----|

If I create a tweenTo from 'start' to 'end', it'll go "the long ways", scrubbing the playhead forward from 10% over to 90%.

Tween from 'start' to 'end' would go
"long ways" from the left to the right

 :==================================>
| start end |
|----|----|----|----|----|----|----|----|----|

So far so good, this makes sense to me.

But what if I don't want that to happen? Since my animation is seemless, technically the animation could start at 10% and go backwards until it reaches the beginning, then loops around to the end of the animation and continues in reverse until it reaches the 'end' label at 90%.

But what if I wanted to go "backwards" from
'start' and loop around to 'end'?

/====: <====/
| start end |
|----|----|----|----|----|----|----|----|----|

This would be the "short way" between those two labels.

My question is, how would I go about creating an effect like this?

That is, if I have two labels, is it possible to animate between them where my animation "wraps around" the timeline instead of staying contained within the timeline?

See the following codepen for an example of this - https://codepen.io/romellem/pen/yQOQar?editors=0010

Within that codepen, on the left is the issue I'm facing, and on the right is a faked" example that shows what I want the animation on the left to do when tweening "around" my two labels.