TweenTo Not looping forward

[jollygreen]

Hello -

 

On the code pen below, when we click the Stop button, the pink box stops on one of the boxes on top.  Nevertheless, the pink box loops backward instead of forward (ie, the pink box moves in opposite direction after clicking the stop button).  How could I make the pink box to loop forward?  I'd appreciate the help.

 

See the Pen GzLdvJ by jollygreen10 (@jollygreen10) on CodePen

 

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

 

 

See the Pen GzLdvJ by jollygreen10 (@jollygreen10) on CodePen

[GreenSock]

You could use a proxy object and a modulus operator to accomplish this:

See the Pen 4eda4336ac74b492e407196d693b3f85 by GreenSock (@GreenSock) on CodePen

 

Here's the function I wrote for you that should make it relatively easy: 

function tweenForwardTo(label) {
  var currentTime = timeline.time(),
      futureTime = timeline.getLabelTime(label),
      duration = timeline.duration(),
      proxy = {time:currentTime};
  if (futureTime < currentTime) {
    futureTime += duration;
  }
  timeline.pause();
  return TweenLite.to(proxy, futureTime - currentTime, {time:futureTime, ease:Linear.easeNone, onUpdate:function() {
    timeline.time(proxy.time % duration);
  }});
}

 

Does that help?

[jollygreen]

@GreenSock - it works like a charm.  Thank you very much!