Stop repeated tween at the end of an iteration

[pimaga]

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.

[Jonathan]

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

[pimaga]

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.

[pimaga]

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.

[Jonathan]

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!

[pimaga]

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.

 

[Dipscom]

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.

[Jonathan]

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

[Dipscom]

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?

[pimaga]

@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

[Carl]

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

 

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

[Dipscom]

Oh look, it's another Thread-Party!

 

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"?

[pimaga]

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

 

[Dipscom]

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.

[pimaga]

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

[MSCAU]

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.

 

[Visual-Q]

 

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

[chrisgannon]

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

 

[Dipscom]

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.

[mikel]

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