GSDevTools Scoping Issues and Suggestion

[iDad5]

The DevTools are really great thank you.

However, for understandable reasons, I ran into problems using them on a project (where my animations and timelines are encapsulated in classes) with callbacks. Under certain conditions the animations wouldn't run at all without any notice in other situation they would run with a console error message (wrong scope), and the callback was called twice but wouldn't work. (not using the DevTools everything worked just fine.)

I fully unterstand that under certain conditions  there will be such problems. My suggestion would that the console messages from DevTools could have an addition like 'GSDevTool:' in front or something similar. That would have helped me to find the cause of my problems faster.

In the case of my Animations failing without notice, I'm not sure what would have helped me, I already started building a CodePen to isolate the problem, but I'm  not well versed with the CodePens and I had to steal someone else's SplitText ULR from an other example and are not sure how to get GSDevTools to work in a CodePen.
 

If someone is interested and would point me in the right direction I'm willing to try to reproduce the issue in a CpodePen.  

[akapowl]

20 minutes ago, iDad5 said:

I'm not sure what would have helped me, I already started building a CodePen to isolate the problem, but I'm  not well versed with the CodePens and I had to steal someone else's SplitText ULR from an other example and are not sure how to get GSDevTools to work in a CodePen.
 

If someone is interested and would point me in the right direction I'm willing to try to reproduce the issue in a CpodePen.  

 

Hello there.

 

When you click on the gear-icon in the JS-section of codepen you will open up the JS-settings.

 

In there, you will see a search-bar. When you search for what you're looking for ('gsap', 'splittext', 'gsdevtools') the search-

results that unfold below that searchbar should show you the neccessary files/cdn-links that you can click on for them to get added to your codepen. It's as easy as that  

 

Here is a pen with GSAP, SplitText and GSDevTools to get you running.

 

See the Pen 522716af28718feffd3abd4c52ed8446 by akapowl (@akapowl) on CodePen

[iDad5]

Thank you. I already had prepared a CodePen, and I knew about the settings, I just didn't realize that the search would work so well...  Thanks.

 

Here it is:

 

See the Pen PobVqwz?editors=1111 by mdrei (@mdrei) on CodePen

 

Here's what happens:

I split text and animate it once. On complete I want to revert the splitting.
I do this in a class an I tried two methods which can be found in the last code line you can comment them in and out.

Both versions work as expected without DevTools. (Line 5 comment in and out)

With DevTools the version that calls revers directly on the SplitText instance (line 25) works but it gave me console errors in my more complex local environment and my guess is that those logs simply aren't captured in the CodePen.
The Version that calls the revertSplit method of my PageAnimation class is successfully called as logged, but twice and the animation does not show and no errors have been reported in ma local environment.

[ZachSaucier]

Hey iDad5. From my testing, line 25 doesn't work regardless of whether or not GSDevTools is included. Here it is with GSDevTools and the other approach removed:

See the Pen PobVbyj by GreenSock (@GreenSock) on CodePen

 

Side note: You should register GSDevTools as a plugin if you're using it in a modules environment.

[iDad5]

Hey Zach,

 

thanks for you answer. You are right in so far as the revert isn't called in the example you mention. (Which I haven't wrapped my head around fully, as it is obviously called at a proper SplitText instance at the time... and I would like to be enlightened about that, but it's not my main concern.)
But at least even with DevTools enabled the first animation is shown.

Why I posted in the first place is the fact that the fully working solution (the other line) stops working with GSDevTools enabled totally and isn't even running the first animation. 

[ZachSaucier]

It'd be really helpful if you could recreate the issue that you're wanting help with  

[iDad5]

I did that. In my CodePen I have an animation that runs as expected. But when I use the DevTools the animation does not run. (I deleted the line we were discussing before, and commented the DevTool creation out - run it as is and you see the text animation. Comment in the DEvTools and you don't see the animation)

 

PS.: I 'don't really need help, I can work without the DevTools, just thought It might be worth understanding. 

[iDad5]

As I'm here, I just wanted to ask if someone found an explanation to for the situation?

(I just tried to use GSDevTools in my more complex project, and found, that it went from crippling all animations to only breaking certain aspects {e.g. SplitText based ones} when I placed the creation of GSDevTools after the creation of my timelines.) 

[GreenSock]

On 3/15/2021 at 3:05 AM, iDad5 said:

As I'm here, I just wanted to ask if someone found an explanation to for the situation?

(I just tried to use GSDevTools in my more complex project, and found, that it went from crippling all animations to only breaking certain aspects {e.g. SplitText based ones} when I placed the creation of GSDevTools after the creation of my timelines.) 

I'm a little late to the party - @iDad5 did you have a reduced test case that shows the problem clearly? Were you saying you think that there's a bug in GSDevTools that we need to look at? 

[iDad5]

8 hours ago, GreenSock said:

I'm a little late to the party - @iDad5 did you have a reduced test case that shows the problem clearly? Were you saying you think that there's a bug in GSDevTools that we need to look at? 

Hi Jack, actually my first CodePen would be that test case. Right now only the GSDevTools Timeline is moving. Once you comment out line 6 ('

GSDevTools.create();

') 

the actual text-animation ist running.

Unfortunately I also had a side issue on which Zach focused, and with which he helped.
I'm not really saying that there is a bug in GSDEvTools I'm just saying that in my (obviously not Zachish) way of doing things I can understand that I might confuse GSDevTools. ( @ZachSaucier   - no offends meant. I'm really thankful for al your help and advice)
As stated above, I wasn't complaining, just wanted to understand better if I made a mistake.

[GreenSock]

Ah, okay, the issue is that in order to maximize runtime performance and ensure that the animations are "fully baked", when you don't define any animation and it must use the global timeline, GSDevTools forces it to completion initially (.progress(1)) and then rewinds it and plays from the start (.progress(0)). You've got an onComplete that is reverting your SplitText instance, so that's getting called right away. See the problem?  When the tweens rewind, there are no characters to animate anymore.

 

The very nature of GSDevTools doesn't lend itself to the way you're setting things up where you rely on an onComplete that eliminates the things that were animating - imagine rewinding that animation with the scrubber after it complete. Won't work. I mean you're totally welcome to do it, I'm just making you aware of the pitfalls and what GSDevTools is generally made for. 

 

In most cases, I'd strongly recommend setting up GSDevTools to point to a particular animation (like a timeline instance or a tween) because it's cleaner. In your example, the PageAnimation's "tl" property, like: 

GSDevTools.create({
  animation: myPageAnimation.tl
});

Does that clear things up? 

[iDad5]

I hereby solemnly  swear, that I am not, I repeat NOT on purpose  trying to misuse all or any of the myriad of near perfect functionalities of the devine GSAP.

I do!

I know that it might look like I would... But that's pure coincidence or my poor skills.

 

Thanks a lot for your explanation. I think I will try to find a lot more projects in the future that can make heavy use of GSAP not to run in those issues. 

[GreenSock]

Ha ha - I know you're not intentionally trying to write edge case code that's brittle or annoying  It's good to have these things come up once in a while so we can address them. I imagine some others may come across this thread in the future and be helped. Plus the more you learn about how things work, the more you're able to help others in these forums. I noticed you've been trying to do that more lately which is great. It's always nice when more people pitch in and try to deliver solutions. It's a fantastic way to learn too!