Bryan

Figured it out! Needed to use the invalidate function. See here: var box = document.querySelector('.box'); var timeline = new TimelineMax({ repeat: -1, onRepeat: () => { timeline.invalidate(); } }) timeline.add(TweenMax.to(box, 1, {x: 0, y: 100})); timeline.add(TweenMax.to(box, 1, {x: 50, y: 80})); timeline.add(TweenMax.to(box, 1, {x: 100, y: 100})); timeline.add(TweenMax.to(box, 1, {x: 150, y: 80})); CodePen Thanks all who helped out.

@PointC That's very close to what I'm looking for. The only problem is that the timeline now ends with a tween to the starting position, when I would rather not have to add the intended _start_ position to the _end_ of the timeline. It complicates things if I want to dynamically add an onComplete listener to the timeline and pause it after the whole timeline completes, as it will no longer pause right at the intended end frame for the timeline animation (since the starting tween was added to the end of the timeline), rather, it will now finish at the intended start position rather than the intended end position. Is there no clean way to make this transition happen with Timeline in a way similar to my "callback hell" example a couple posts above? I was hoping that there was some parameter for Timeline to just enable this functionality, but that doesn't seem to be the case. Thank you for your help so far.

Hey @PointC Thanks, this does indeed fix this particular issue, but the general issue is still unsolved, as my example was just a simplified test case. Take for example a timeline with more than two tweens: var box = document.querySelector('.box'); var timeline = new TimelineMax({ repeat: -1 }) timeline.add(TweenMax.to(box, 1, {x: 0, y: 100})); timeline.add(TweenMax.to(box, 1, {x: 50, y: 80})); timeline.add(TweenMax.to(box, 1, {x: 100, y: 100})); timeline.add(TweenMax.to(box, 1, {x: 150, y: 80})); CodePen The desired effect would be that once the box reaches the right side at the end of the timeline, it would then tween from *that* (150, 80) position back to the (0, 100) position, rather than tweening from the *original* (0, 0) position to the (0, 100) position. Here's an example that correctly shows the effect I'm going for, created without using Timeline. As you can see, it's quite cumbersome: var box = document.querySelector('.box'); doAnimation(); function doAnimation() { TweenMax.to(box, 1, {x: 0, y: 100, onComplete: function() { TweenMax.to(box, 1, {x: 50, y: 80, onComplete: function() { TweenMax.to(box, 1, {x: 100, y: 100, onComplete: function() { TweenMax.to(box, 1, {x: 150, y: 80, onComplete: function() { doAnimation(); }}); }}); }}); }}); } CodePen Is there any way to represent that code with Timeline?

Thanks for the reply. Unfortunately that doesn't quite work. First issue is that it still transitions back to its original position (the original problem I had). Also, I don't necessarily want to reverse the animation. I just want to transition from the last "state" of the timeline back to the first state on repeat without going to the initial position.

I'm having an issue when repeating timelines which is causing some issues. Here's the code I'm using: var box = document.querySelector('.box'); var timeline = new TimelineMax({repeat: -1}); timeline.add(TweenMax.to(box, 1, {x: 50, y: 50})); timeline.add(TweenMax.to(box, 1, {x: 50, y: 100})); I just want the animation to repeat between the two positions (x: 50, y: 50 and x: 50, y: 100). The behavior I'm seeing is that the animation will reset back to the initial position (x: 0, y: 0) whenever the timeline repeats. I want it to tween from the position of the end of the timeline back to the start of the timeline on repeat, not from the original position to the start of the timeline. So, after the initial transition when the timeline is played, the X value should never change from 50 back to 0. Hopefully that makes sense, can anyone lead me in the right direction? Thanks.