Stop repeat animation on its end

[gsapguy]

Hi everyone! I have no idea if this is easy to do but here we go...

How can I end an infinite timeline onComplete? I mean, I want to end it on user click but I don't want to kill(), clear() or pause(), I just want the animation to end his cycle then pause.

Is it simple?

Here's a pen I've made

See the Pen EOpgNd?editors=0011 by yikifp (@yikifp) on CodePen

 

See the Pen EOpgNd?editors=0011 by yikifp (@yikifp) on CodePen

[GreenSock]

Sure, that's no problem. I assume you want to always have it land on its yoyo cycle too, right? Here's a fork of your codepen: 

See the Pen addd46f829e34964c57c718ed30505d5?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that what you're looking for? 

 

The logic looks like this: 

var repeats = Math.floor(tl.totalTime() / tl.duration());
if (repeats % 2 === 0) { //make sure we end on a yoyo cycle which would be on an ODD number of repeats!
   repeats += 1;
}
tl.repeat(repeats);

 

Let us know if you need anything else. Happy tweening!

[gsapguy]

Yes! Thank you Jack.

Im learning bot things, gsap and JS and now im trying to figure out how to edit your solution to make the animation play again on another click ?

[GreenSock]

5 hours ago, yiki said:

now im trying to figure out how to edit your solution to make the animation play again on another click

 

I just updated the codepen to do what you were requesting. Does that help?

 

The old code that'll just end a timeline the next time the yoyo completes looked like this:

function endTimeline(tl) {
    var repeats = Math.floor(tl.totalTime() / tl.duration());
    if (repeats % 2 === 0) { //make sure we end on a yoyo cycle which would be on an ODD number of repeats!
        repeats += 1;
    }
    tl.repeat(repeats);
}

 

And the updated code that toggles things looks like this: 

function toggleTimeline(tl) {
    tl.willStop = !tl.willStop; //just attaching a custom "willStop" property that we toggle so we can track even if the user clicks many times quickly.
    if (tl.willStop) {
        var repeats = Math.floor(tl.totalTime() / tl.duration());
        if (repeats % 2 === 0) { //make sure we end on a yoyo cycle which would be on an ODD number of repeats!
            repeats += 1;
        }
        tl.repeat(repeats);
    } else {
        tl.repeat(-1);
        if (!tl.isActive()) {
            tl.restart();
        }
    }
}

 

And for the record, "willStop" is just a name I made up - it's not some official part of the API. I just wanted some way of tracking the state so that if someone clicks many times quickly, it handles things properly. 

 

Does that help? 

[gsapguy]

20 hours ago, GreenSock said:

 

I just updated the codepen to do what you were requesting. Does that help?

 

The old code that'll just end a timeline the next time the yoyo completes looked like this:

function endTimeline(tl) {
    var repeats = Math.floor(tl.totalTime() / tl.duration());
    if (repeats % 2 === 0) { //make sure we end on a yoyo cycle which would be on an ODD number of repeats!
        repeats += 1;
    }
    tl.repeat(repeats);
}

 

And the updated code that toggles things looks like this: 

function toggleTimeline(tl) {
    tl.willStop = !tl.willStop; //just attaching a custom "willStop" property that we toggle so we can track even if the user clicks many times quickly.
    if (tl.willStop) {
        var repeats = Math.floor(tl.totalTime() / tl.duration());
        if (repeats % 2 === 0) { //make sure we end on a yoyo cycle which would be on an ODD number of repeats!
            repeats += 1;
        }
        tl.repeat(repeats);
    } else {
        tl.repeat(-1);
        if (!tl.isActive()) {
            tl.restart();
        }
    }
}

 

And for the record, "willStop" is just a name I made up - it's not some official part of the API. I just wanted some way of tracking the state so that if someone clicks many times quickly, it handles things properly. 

 

Does that help? 

This is very creative and nicely done. Thanks!