[Repeating timeline without going back to initial position]

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}));

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

 

Thanks all who helped out.

[Repeating timeline without going back to initial position]

7 minutes ago, PointC said:

There would be a few ways to make this happen, but I think the simplest would be to tween to your repeat starting position with a TweenMax outside of your timeline. When that completes, start your main timeline that infinitely repeats. Something like this:

 

See the Pen vedWYx by PointC (@PointC) on CodePen

Does that work for you?

 

Happy tweening.

 

@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.

[Repeating timeline without going back to initial position]

23 minutes ago, PointC said:

Hi @Bryan

 

Welcome to the forum.

 

If I understand your desired outcome correctly, I'd recommend removing the repeat from your timeline and add it to the last tween instead. Like this:

var box = document.querySelector(".box");
var timeline = new TimelineMax();
timeline.to(box, 1, {x: 50, y: 50});
timeline.to(box, 1, {x: 50, y: 100, repeat:-1, yoyo:true});

 

Is that what you meant?

 

Happy tweening and welcome aboard.

 

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}));

See the Pen dVdVBX by anon (@anon) on 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();
        }});
      }});
    }});
  }});
}

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

 

Is there any way to represent that code with Timeline?

[Repeating timeline without going back to initial position]

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.

[Repeating timeline without going back to 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.

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