Jump to content
GreenSock

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

Stop repeated tween at the end of an iteration

Recommended Posts

Hi !

 

I'm new to GSAP, and I discover progressively the many possibilities of this great tool.

 

But after parsing the doc, I don't figure how to stop a repeated tween *at the end of a complete iteration*.

 

More precisely, I have some div jumping like that :

TweenMax.to($('#div1'), 1, {bottom: '200px', ease:Power2.easeOut, repeat: -1, yoyo: true});

And I would like to stop it (in reaction to some user event) at the end of the current jump (when on the floor).

 

I've tried to call kill() within a function attached to onRepeat, but with yoyo enabled, onRepeat is triggered twice a jump: at the end of the jump but also at the top of the jump.

 

Moreover, as a workaround, I thought to check the bottom property and call kill only if it is 0, but its value is never 0 (but some small numbers like 21px, 23px, ...).

 

Did I miss something ?

 

Many thanks in advance !

See the Pen zKwVOO by pimaga (@pimaga) on CodePen

Link to comment
Share on other sites

Hello pimaga and welcome to the GreenSock Forum!

 

I am a little confused by your question. Is it possible for you to please create a limited codepen example? It will be easy to see what type of movement animation you are doing to answer you properly.

 

Here is a video tut on how to create a codepen demo example.

 

 

Tnanks :)

Link to comment
Share on other sites

Here it is :

 

See the Pen VKbOOK by pimaga (@pimaga) on CodePen

 

The kill button works as expected, stopping the tween at the current frame.

The stop button stops the tween at next extremity (top or bottom).

But is there an easy way to stop the tween after a complete iteration (ie. at the bottom) ?

 

Thank you very much.

Link to comment
Share on other sites

And in this other pen :

 

See the Pen zKwVOO by pimaga (@pimaga) on CodePen

 

You can see that the CSS bottom value is 200px at the top of the jump, as expected, but is not 0 at the bottom of the jump, and even changes from an iteration to another.

Link to comment
Share on other sites

Thank you for the codepen examples. Just one thing to keep in mind that since you are using a repeat: -1 .. and infinite repeat. The onComplete will never fire since the tween is repeating forever.

I added a onComplete special callback to your to() tween. You can see that here if you look in the console.. it doesn't fire the onComplete.

 

See the Pen wzdLBj?editors=1111 by jonathan (@jonathan) on CodePen


 

Please standby while we look into a solution for you! :)

Link to comment
Share on other sites

I understood the onComplete callback, but I didn't see the console in codepen :-). So I simplified my second example using the console :

 

See the Pen zKwVOO by pimaga (@pimaga) on CodePen

 

Link to comment
Share on other sites

Let me butt in here...

 

How about good ol' cheating code?

 

;)

 

See the Pen WGjqrm?editors=0011 by dipscom (@dipscom) on CodePen

 

 

By the way, you might want to change the attribute you're animating from "bottom" to "y" to reduce layout trashing and make use of GPU when available.

 

Like this:

 

See the Pen ORmZoa?editors=0011 by dipscom (@dipscom) on CodePen

Link to comment
Share on other sites

pimaga, you will see that the onComplete will not fire since you have repeat:-1 .. so your tween runs forever without completing. That is why you see no console being fired. That is what i was trying to show you in my codepen ;)

Link to comment
Share on other sites

Following on Jonathan's comment: Would you have a particular reason to have the repeat:-1? Do you need it to repeat a specific number of times and stop or stop after a certain event or after a certain amount of time?

  • Like 1
Link to comment
Share on other sites

@dipscom :

 

I had the idea of such a workaround. But I thought that stopping a repeated, yoyoed tween "gracefully", ie. after a complete cycle, was an identified need (yes, I need the infinite repeat since the tween is interactively stopped by the user).

Thank you for your optimization tip !

 

@jonathan

 

I understood your precision about onComplete. The doc is clear about it :-)

Link to comment
Share on other sites

I'm going to jump in with some more code cheating  :mrgreen:

 

If you want to box to check every time it reaches the bottom you can put a tween that repeats once inside a timeline that repeats infinitely. Each time the timeline repeats check to see if it should stop.

 

var shouldStop = false;


var tl = new TimelineMax({repeat:-1, onRepeat:checkShouldStop})
  tl.to('#div1', 1, {bottom: '200px', ease:Power2.easeOut, repeat: 1, yoyo: true});


function checkShouldStop() {
  if(shouldStop) {
    tl.pause();
  }else {
    tl.resume();
  }
}


$('#stop').on('click', function() {
  $("#div1").text("i will stop at the bottom")
  shouldStop = true;
});


$('#resume').on('click', function() {
   $("#div1").text("")
  shouldStop = false;
  tl.resume();
});

http://codepen.io/GreenSock/pen/jrmgrW?editors=1010

  • Like 3
Link to comment
Share on other sites

Oh look, it's another Thread-Party! :D

 

Typical Carl, always dragging this bar up... 

 

@pimaga, forgive me for asking, it's really curiosity now. But, if you have a tween that loops infinitely, only stopping when the user interacts. Why is it that you need it to stop after one, as you call it "cycle"?

  • Like 2
Link to comment
Share on other sites

Imagine you have some sprite jumping because he is very happy.

And suddenly, some action of the user makes him not so happy.

Then he stops jumping, but only after landing :-)

 

Link to comment
Share on other sites

Now it's a different conversation.

 

A long time ago, in this galaxy, not far away there was a similar topic about it. Tried finding it, but no luck at the moment.

 

TLDR;

 

Make a timeline that plays your animation but instead of having a repeat:-1, have a onComplete that checks if it should repeat or not. Set a variable that you toggle true or false when the user interacts. That way, the timeline will play the "cycle" until the end after the interaction but will not repeat.

 

Pretty much what Carl has shown you.

  • Like 2
Link to comment
Share on other sites

OK, so I need a timeline to do this. Thanks to all of you !

Link to comment
Share on other sites

  • 1 year later...

Thanks, this was helpful. I ended up starting my own CodePen question before I found Carl's answer so I'm posting this here in case anyone else needs another reference in future:

 

See the Pen ejeeBx?editors=1111 by MSCAU (@MSCAU) on CodePen

 

  • Like 2
Link to comment
Share on other sites

 

Another example of the same concepts discussed above in this case using jquery.hover with onRepeat.

  • Like 1
Link to comment
Share on other sites

  • 3 months later...

I've never liked the above 'flag' solution - it's messy and sprawling.

 

I'd like to be able to do something like:

 

let tl = new TimelineMax();

tl.to('#el', 2, {y: 40,  repeat: -1,  yoyo:true});

//later

tl.repeat(0); //this would make it play to the end and stop

 

  • Like 1
Link to comment
Share on other sites

While I agree the 'flag' option is not the 100% most wonderful way to go about it, there's the issue that if you have an infinite tween inside a timeline, the playhead will never go past that tween so, there isn't really a way to have the timeline call another method beyond said tween.

  • Like 3
Link to comment
Share on other sites

Hi guys,

 

There is always another way.
And that is not an alternative truth!

 

See the Pen Jmgvgp by mikeK (@mikeK) on CodePen

 

Have a nice day ...

Mikel

 

 

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