Jump to content
Search Community

onComplete fires before tween ends completely

iLuvGreenSock test
Moderator Tag

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 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
  });
}

 

 

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

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

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

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

Link to comment
Share on other sites

  • 2 weeks later...
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?

 

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...