Jump to content
Search Community

Timeline onStart appears to be firing twice.

Jaron test
Moderator Tag

Recommended Posts

I was hoping somebody might be able to help with a little GSAP issue I'm having 🤞

 

Essentially, on our site we have a 'Menu and Search' button, that when clicked, will animate in the various parts of the full-screen, takeover menu. As well as this, we also have a separate function which deals with toggling a few classes, etc. This function has been assigned to the onStart callback, and also the onReverseCompleted callback, however it appears that on rare occasions (and I can't seem to create a consistent test case for this) that the onStart is running twice, and therefore breaks our animation.

 

Does anybody have any ideas as to why this may be? I've mocked up a sample CodePen with a general gist of our code, except in a more simple context.

 

Any help would be much appreciated. Thanks!

See the Pen aefddb5e696b3c25094fcb82609999a8 by Numiko (@Numiko) on CodePen

Link to comment
Share on other sites

Hey Jaron, welcome.

 

Are you able to reproduce it at all in the CodePen? If so, are you able to recreate the error just by clicking the button or do you need to keep running the pen again to have it be reproduced some of the time?

 

Does the issue happen across multiple browsers and devices? 

 

Side notes:

  • You might prefer using xPercent and yPercent instead of x: "n%".
  • We recommend using the condensed string form of eases. For example "power2.inOut" instead of Power2.easeInOut.
  • You might find GSAP's defaults functionality useful.
Link to comment
Share on other sites

I'm super curious to see how this can be reproduced. In the code, onStart will ONLY fire if the playhead moves from ZERO to a non-zero value (basically it moves from the start). That's it. I wonder if your app has something in it that might cause the playhead to go back to the start when you didn't realize it? Totally guessing. I certainly can't replicate the issue, but if you could give us a reduced test case that shows how to do it, I definitely want to explore it. 

Link to comment
Share on other sites

Hi both,

 

Firstly, thanks for the reply and help, it is very much appreciated. I'll be sure to take a look at the side notes too.

 

In the CodePen itself I have not been able to reproduce thus far, but the code is very similar to what we have in real terms. I know it's not ideal though, not being able to reproduce the bug I'm asking about. Even on my local instance, where I can reproduce the bug, it's not consistent. 90% of the time, it's fine, but then on the rare occasion the toggle function will run twice, and I'm not sure why (I only know it runs twice due to it outputting two console.log() statements)

 

It does seem to happen across Chrome, but when testing in IE11, I seem to be able to replicate the bug more often than in any other browser, which is equally baffling, but then, it is IE.

 

Also, we do have quite a lot of other GSAP bits and pieces going off on the site, so your guess about something else potentially getting in the way might not be a bad one. I've just removed all other JS though and the issue still persists... The weird thing is, is that when I removed all other JS modules from the site, and all other non-related JS, the issue happens consistently and I can reproduce it... I will see if I can update the CodePen to at least try and get something you can reproduce, and I'll comment back here once done 🤞

 

Thanks again, I really appreciate the help.

Link to comment
Share on other sites

So I've been looking into this a little more, and I can't appear to get it to error on CodePen, however what is interesting, is that copying that exact code into my site, with all other JS modules I'm aware of commented out / disabled, still appears to cause the issue. It's clearly something within our site that's potentially getting in the way, but given I've removed all other JS modules I'm not sure what at this point.

 

Another strange finding, is that when not paused() by default, it works fine. But having it paused() and then initiating it on click(), is when the error seems to occur.

 

I'm going to keep digging, but does any of that give you any more ideas? I appreciate it's a tough one given the context!

 

Thanks.

Link to comment
Share on other sites

  • 1 year later...
  • 4 weeks later...

Just to note, I've just experienced this myself and I'm running the latest version of GSAP (3.7.0). Thankfully I've fixed it by moving the onStart callback out of the first tween and into the timeline, so this code triggered the callback twice:

 

roomFlipTL = gsap.timeline();

roomFlipTL
.to(thisFlip, {
  duration: 1,
  rotateY: "180deg",
  xPercent: 100,
  ease: "back.out(0.5)",
  onStart: closeFlip,
  onStartParams:[thisRoom]
}, 0)

 

This fixed it and it only called the closeFlip function once:

 

roomFlipTL = gsap.timeline({
  onStart: closeFlip,
  onStartParams:[thisRoom]
});
	
roomFlipTL
.to(thisFlip, {
  duration: 1,
  rotateY: "180deg",
  xPercent: 100,
  ease: "back.out(0.5)"
}, 0)

 

So I don't know if this is unexpected behaviour still or if I'm misunderstanding something about the onStart callback, either way I thought it worth a share. :)

Link to comment
Share on other sites

17 hours ago, GreenSock said:

Sorry about any confusion there, @OneManLaptop - it was a regression in 3.7.0 that was already fixed in 3.7.1 which has been out for a bit. Upgrade and you should be golden. 👍  No need to move it to the timeline (although that's perfectly fine too). 

 

Ah that's good to hear, I'll get everything updated. Cheers. 👍

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