Jump to content
Search Community

Timeline's onComplete callback fired twice when GSDevTools added

RolandSoos 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

Thanks!

 

Ok, I can clarify:

 

  1. When the GSDevTools script is simply loaded (not instantiated with GSDevTools.create()) the onComplete in your callback fires twice (strange and unexpected).
  2. When GSDevTools script is removed the onComplete fires once (good and expected).
  3. When GSDevTools script is loaded and GSDevTools.create() is called the onComplete only fires once (good and expected)
  4. When GSDevTools script is loaded and GSDevTools.create() is called GSDevTools is really small and has a big red square ( strange, yet expected once you realize thereis a css rule for div in the css panel :) )

We will have to look into this deeper. Sorry for the confusion.

 

 

  • Like 3
Link to comment
Share on other sites

Hi @RolandSoos

 

Sorry your having this issue!

 

Have you tried to run your codepen in debug mode instead of in edit or full mode. The reason being is because edit and full mode run in an iframe. Whereas debug mode runs without an iframe. I frames can cause issues with browser console and the javascript parser.

 

In your codepen URL change /pen/ to /debug/ and check the console and see if you see it fire twice.

 

Like this /pen/ to /debug/ :

 

https://codepen.io/anon/debug/ZmVoXQ

 

See if that helps, this way we can rule out if codepen is causing an issue with GSDevTools?

 

Thanks and Happy Tweening :)

 

  • Like 1
Link to comment
Share on other sites

I actually had this happen to me a few months ago and then completely forgot to ask about it. Whoops. I encountered the same thing Carl mentioned. I had DevTools loaded in a pen but didn't use it with create() and I got a double fire of the onComplete. It happens in all modes of CodePen and I just tried it on a regular web page with the same result.

 

See the Pen RqEEbj by PointC (@PointC) on CodePen

 

  • Like 2
Link to comment
Share on other sites

  • 2 months later...
  • 2 years later...

This seems to still effect my projects. When I add the GSDevTools it seems to call all of the onCompletes on load, it also prevents me from using .seek or play("startAtALable"). I wasn't sure if I should have created a new question since this is 2 years old now. 

Link to comment
Share on other sites

It does seem to fire twice if you don't link it to a particular animation.  

See the Pen b39c8b562a302b71e87ce99ecdabf198 by PointC (@PointC) on CodePen

 

However, following recommended practices and linking it to a specific animation results in everything working correctly.

See the Pen 3174afe8e95e19de4f396a8d4b3f75ea by PointC (@PointC) on CodePen

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...
On 4/27/2021 at 3:00 PM, PointC said:

It does seem to fire twice if you don't link it to a particular animation.  

I believe it's fixed in the upcoming release which you can preview on CodePen at https://assets.codepen.io/16327/GSDevTools3.min.js (which is what's already in your demo, so just do a hard-refresh and you should see it). But I still do strongly recommend defining a particular animation whenever you create a GSDevTools instance. 👍

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