iLuvGreenSock

onComplete fires before tween ends completely

Recommended Posts

Hi guys,

 

I've a tween for all my elements in a for loop and it works as expected in Codepen. The onComplete function call basically is to change a var to back to "true" when the animation ends. However onComplete gets fire just before the tween ends when this is on my actual code. I'm not sure why this is happening. Hoping someone can advise. Thank you so much!

 

for (var i = 0; i < elem.length; i++) {
  elem[i].myAnimation = TweenLite.to(elem[i], 1, {
    yPercent: -100,
    ease: Power1.easeInOut,
    onComplete: onAnimationCompleteEnd,
    onReverseComplete: onAnimationCompleteEnd,
    paused: true
  });
}

 

 

Share this post


Link to post
Share on other sites

Your snippet is fine. Can you post a reduced test case showing the problem?

 

 

  • Like 3

Share this post


Link to post
Share on other sites

Thanks @Sahil for your swift reply!

 

What i'm puzzled is that on Codepen, it works perfectly well. However on my actual code, onComplete function doesn't wait for the tween to be fully complete before it gets called. In fact, onComplete fires just when the tween is about to complete.

 

I've also increased the tween duration to 3s and onComplete gets fired 3s while tween started slowly and ends another 3s later. 

Share this post


Link to post
Share on other sites

Hard to guess what could be happening in your actual code. And it is impossible for onComplete to fire before tween completes, unless you are using stagger tween. In stagger tweens, onComplete gets fired for every single tween. You need to pass 5th parameter as function for onCompleteAll callback.

 

https://greensock.com/docs/TweenMax/static.staggerTo()

 

Apart from that it is impossible for us to help without demo showing problem. But I am sure there must be something else in your code that must be causing this issue.

  • Like 4

Share this post


Link to post
Share on other sites

Thank you @Sahil, I appreciate your time to reply. 

 

Sorry, let me correct myself, what I observe is onComplete gets fire at the last split second when the tween ends (before it reaches yPercent: -100), not after.  

transform: translate(0%, -100%) matrix(1, 0, 0, 1, 0, 0);

 

The tween for each elem will be played when it detects the delta in the mousewheel event. So it's indeed very strange as I did not use any stagger tween.

Share this post


Link to post
Share on other sites

Hi iLuvGreenSock,

 

Sorry, but pasting some css styles into your response does nothing to get us closer to understanding why you think an onComplete is firing early.

As Sahil noted it is virtually impossible for an onComplete to fire before its scheduled time.

 

I've also increased the tween duration to 3s and onComplete gets fired 3s while tween started slowly and ends another 3s later. 

 

Please provide a demo that clearly illustrates this issue and we will do our best to explain what is happening and offer a solution.

  • Like 5

Share this post


Link to post
Share on other sites

Thank you for your reply. @Carl. I'm sorry it wasn't clear. Here's a demo. Works perfectly ok on Codepen.io but on actual code, the onComplete fires before tween ends. 

 

Hope this help you to point me in the right direction. Thanks a lot in advance to you awesome guys.

Share this post


Link to post
Share on other sites

@iLuvGreenSock, are you saying that you cannot provide a reduced test case that shows it [not] working as you described? It doesn't help much to see a codepen that works perfectly. There must be something else in your code that you're doing differently when it's breaking. We'd love to help, but we just can't troubleshoot blind unfortunately.  

  • Like 3

Share this post


Link to post
Share on other sites

Ok, do you know if it's possible to delay the onComplete call? Or add some delay time at the end of my tween before the onComplete call?

 

This is already a reduced test case on Codepen.io. What I'm trying to understand is why the same code words in Codepen but not in my actual code. Thank you nonetheless @GreenSock, appreciate it. I'm sorry if this isn't the right place to post my question.

Share this post


Link to post
Share on other sites

Hi @iLuvGreenSock,

 

Please understand that it is indeed a reduced, but not the CodePen that shows your problem.

We always and gladly help - if feasible.

 

If you want to call a function that runs exactly when you want it, then .call () may be a variant - see the docs here

 

tl.call(func, ["param1"]);  //appends to the end of the timeline
tl.call(func, ["param1"], this, 2);  //appends it at exactly 2 seconds into the timeline (absolute position)
tl.call(func, ["param1"], this, "+=2");  //appends it 2 seconds after the end (with a gap of 2 seconds)
tl.call(func, ["param1"], this, "myLabel");  //places it at "myLabel" (and if "myLabel" doesn't exist yet, it's added to the end and then the tween is inserted there)
tl.call(func, ["param1"], this, "myLabel+=2");  //places it 2 seconds after "myLabel"

 

Happy calling ...

Mikel

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites
10 hours ago, iLuvGreenSock said:

Ok, do you know if it's possible to delay the onComplete call? Or add some delay time at the end of my tween before the onComplete call?

 

This is already a reduced test case on Codepen.io. What I'm trying to understand is why the same code words in Codepen but not in my actual code. Thank you nonetheless @GreenSock, appreciate it. I'm sorry if this isn't the right place to post my question.

 

An onComplete fires the moment a tween finishes (as it should). I'm worried that if you think that's not happening and you're trying to add some extra time to "fix" it, you're probably missing the core problem. Sure, you could easily add a function call later in the timeline (wherever you want), or even just use TweenMax.delayedCall() with a specific time, but again, I'm concerned that you may be missing some core issue with what you've built and this may turn into more of a hack than a fix. I'd really like to help - I just can't imagine what the problem could be without seeing a demo. 

 

And this is definitely the right place to post a GSAP-related question like this. Absolutely. We welcome it. 

  • Like 5

Share this post


Link to post
Share on other sites

Thanks to all the superheroes @Sahil, @mikel, @GreenSock, @Carl for all your inputs/advise. I've actually used a cross-browser plugin https://www.npmjs.com/package/jquery-mousewheel on my actual code to manage the mousewheel event since it (the one on my Codepen demo) doesn't work on webkit browsers. This JS plugin also changed GreenSock JS to v1.18.0 instead. Just mentioning though I know this won't help you guys in understand the core issue.

Share this post


Link to post
Share on other sites

It seems that this css rule is the main culprit in my code. All animation is silky smooth after removing this. Hope this will help anyone encountering the same issue.

 

* {
  transition(all .3s ease-in-out);
}

 

So sorry for wasting everybody's bandwidth. 😁

  • Like 1

Share this post


Link to post
Share on other sites
3 hours ago, iLuvGreenSock said:

 


* {
  transition(all .3s ease-in-out);
}

 

 

 

0IwyPsN.png

 

 

  • Like 1
  • Haha 6

Share this post


Link to post
Share on other sites

Hi,

 

QuickTip of the day ...

 

 

 

just do it ...

Mikel

 

 

  • Like 7

Share this post


Link to post
Share on other sites

Hi,

 

Sorry, I forgot to implement some onComplete.

Its complete now ...

 

 

Let him dance ...

Mikel

 

P.S.: If somebody could hide 'view resources', it would be great!

 

Jack (?) - thank you!  Occasionally, I'll reveal what the coder says.

  • Like 1

Share this post


Link to post
Share on other sites
On 11/30/2018 at 9:30 AM, mikel said:

P.S.: If somebody could hide 'view resources', it would be great!

 

That would be nice, but that's something that would have to be done on the backend by @Carl or @GreenSock 

 

 

Share this post


Link to post
Share on other sites
32 minutes ago, OSUblake said:

 

That would be nice, but that's something that would have to be done on the backend by @Carl or @GreenSock 

 

 

 

I'm lost - what "view resources" are we talking about? 

Share this post


Link to post
Share on other sites
7 minutes ago, GreenSock said:

I'm lost - what "view resources" are we talking about? 

 

Hehe. It looks like CodePen just changed it.

 

QOqy474.png

 

Before, the resources, 1x, 0.5x, 0.25x, and rerun buttons were overlaid on top of a pen's content, which could cover stuff like buttons. I know there are different settings for how pens are emebedded, which you would have to do on the backend, but it looks like the problem might be fixed, right @mikel?

 

Share this post


Link to post
Share on other sites

Hi @GreenSock,

Hi @OSUblake,

 

Yes and thank you very much. The buttons are now outside the viewport.

I noticed it already and made an edit.

 

Have a nice day.

Mikel

 

 

Share this post


Link to post
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.