[Stop repeated tween at the end of an iteration]

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

[Stop repeated tween at the end of an iteration]

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

 

[Stop repeated tween at the end of an iteration]

@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

[Stop repeated tween at the end of an iteration]

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

 

 

[Stop repeated tween at the end of an iteration]

And in this other pen :

 

 

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.

[Stop repeated tween at the end of an iteration]

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.

[Stop repeated tween at the end of an iteration]

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