onYoyoComplete

[james.davies]

Hi,

 

Before I start, my code is written in TypeScript which compiles into JS.

I have managed to get a yoyo animation to work as expected:
 

public dab(): void {
    TweenMax.to(sprite.scale, 0.5, {
        x: 1.5,
        y: -1.5,
        ease: Power2.easeOut,
        yoyo: true,
        repeat: 1,
        repeatDelay: 0.1,
        onReverseComplete: this.handleYoyoComplete(),
        onReverseCompleteScope: this
        // onRepeatComplete: this.handleYoyoComplete,
        // onRepeatCompleteScope: this
    })
}

protected handleYoyoComplete(): void {
    console.log("YOYO COMPLETE!");
}

 

However, the method 'handleYoyoComplete()' gets called when the sprite is fully stretched out, before the yoyo starts but after the initial tween. I've tried onComplete, onReverseComplete, and onRepeatComplete. I have tried these all with and without the parenthesis (i.e.  onReverseComplete: this.handleYoyoComplete() and onReverseComplete: this.handleYoyoComplete.

 

Ultimately, is there a way of calling a method when the yoyo is fully complete?

 

Thanks for reading, all help will be most appreciated.

 

[Dipscom]

Hi @james.davies,

 

Welcome to the Forums!

 

Your callback should be onComplete: handleYoyoComplete - without the "()". It should fire at the end of the Tween, after it has repeated. I can't see what is wrong or why you are not seeing the result as expected. Could you provide a reduced case example? CodePen has supports TypeScript, you should be able to get it running there without any issues.

[james.davies]

Hey @Dipscom,

 

You were right, I needed to use onComplete without the parenthesis. I did have a follow up error, but that was because I was passing params without them being in an array. Thanks for the help

[Dipscom]

That's fine James, places like CodePen just make it easier for us to actually see the code in context. It's not that GSAP is affiliated with CodePen or anything of the sort, you can use any online code editor of your choice as long as there's a way for us to see the code and tweak it live. It makes a world of difference when trying to figure out what is going on.

 

For your example pen, you have a few issues. You need to include any libraries you intend to use. To do that:

 

Click on the button that says "Settings" on the top right of the screen, to add JavaScript libraries, click on the "JavaScript" tab, there's a search bar, type the name of the library and pick from the results. I'm guessing you will be wanting GSAP and jQuery from what I saw in your code.

 

After that, you have some unconventional setup that I am not familiar with. I am not sure what you expect $("anim") to return but I am pretty sure it won't be an object that you can access with "this.anim.scale". So, you might need some refactoring there. Also, you are setting an onCompleteParams with a "dispatchEventType" that doesn't exist - this will throw errors and cause your JavaScript to break. Finnaly you have a onCompleteScope set to "this" that looks redundant to me.

 

I've made the bellow for you as an example, see if it helps:

 

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

 

 

[james.davies]

I've added the resources, and tweaked the code to be closer to yours, but my square is still not moving? Sorry, I'm aware this isn't GSAP related at this point, but you've already been more helpful than any tutorials I've see

[Dipscom]

You're close, almost there.

 

Now are just typos and missing functions.

 

- There's an extra "}" in line 14.

- You still have "dispatchEventType" in your onCompleteParams that doesn't exist.

- Although it works, you don't need the "this" in front of handleDabComplete and in onCompleteScope

[james.davies]

Excellent! Thanks so much for your help @Dipscom

 

See the Pen OKPEPX?editors=1111 by james-davies (@james-davies) on CodePen