Jump to content
Search Community

Repeating timeline without going back to initial position

Bryan test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

:)

  • Like 1
Link to comment
Share on other sites

Ohk I didn't read it properly. It happens because you are animating from original position to this first position and then further. So timeline will repeat from the original position as well.

 

I have updated my pen and instead of first animation I am setting value to start position.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

:)

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 5
Link to comment
Share on other sites

  • 4 years later...

[I know this is an old topic, but it was one of the top hits on Google when I searched for gsap repeat timeline, so I'm adding a link here in case anybody else (including "Future Me") stumbles upon it again....  «grin»]

 

GSAP 3 has added the repeatRefresh: true feature to simplify/fix this:

 

See the Pen JjMdQvV by DabeDotCom (@DabeDotCom) on CodePen

 

PS — Big thanks to @OSUblake for helping me figure it out! 🤩

  • Like 3
Link to comment
Share on other sites

  • 11 months later...

See? THIS, right here. 'repeatRefresh : true' THIS is why I love Greensock.

13 years ago I was a Flash developer and learned about TweenMax and it changed my life, suddenly I was adding subtle animations to everything because Tweenmax made it so easy. One day I had a problem and didn't know what to do, I was looking at writing up a bunch of code just to get something to happen over and over. I got onto the GreenSock site and poked around the documentation and learned about 'yoyo : true' OMG GreenSock had an answer for EVERYTHING!

 

Today, 13 years later, in HTML/JavaScript I needed what I was calling a progressive repeat. I needed to add 25 pixels to the y over and over again, not going back to the original position. I thought yoyo would be the answer but it wasn't working, it was resetting the element back to zero then to 25. I came here and learn about ' repeatRefresh : true' and once again: "GreenSock has an answer for EVERYTHING!"

 

Thank you @DabeDotCom 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...