Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
yiki

Stop repeat animation on its end

Recommended Posts

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

Link to comment
Share on other sites

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: 

 

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!

  • Like 3
Link to comment
Share on other sites

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 ?

Link to comment
Share on other sites

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? 

  • Like 3
Link to comment
Share on other sites

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!

  • Like 1
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.
×