Jump to content
Search Community

Stop repeated tween at the end of an iteration

pimaga test
Moderator Tag

Go to solution Solved by Dipscom,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

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

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

@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

  • Solution

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

  • 1 year later...
  • 3 months later...

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

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.
×
×
  • Create New...