Jump to content
Search Community

GSDevTools + ScrollTrigger seem to create a bug

corysimmons test
Moderator Tag

Recommended Posts

When I scroll down, I expect the red block to activate an animation that slides it to the right when `.box` enters the viewport. This works as expected when GSDevtools is disabled.

 

When I add GSDevtools though, it doesn't trigger the animation when you scroll down.

 

For some reason it does trigger the animation (even with GSDevtools) if you are already scrolled down to the red block and refresh the page.

 

Definitely seems like a bug, but maybe there is some workaround setting so I can get back to studying ScrollTrigger. 🤞😅

See the Pen rNJLOgP?editors=1010 by corysimmons (@corysimmons) on CodePen

Link to comment
Share on other sites

Welcome to the forums @corysimmons

 

Is there any reason you are trying to combine ScrollTrigger and GSDevTools? Those are two competing animation controllers, so I would expect some strange behavior. If I wanted to scrub through a ScrollTrigger animation, I would just set scrub: true on the animation instead of trying to go through GSDevTools.

 

  • Like 1
Link to comment
Share on other sites

So ScrollTrigger is literally just that? If you hit y coord, it triggers some anim? Fine.

Not being facetious but some "ScrollTrigger and GSDevtools don't play nice together because ScrollTrigger auto-triggers an animation when you hit a specific Y-coord so there's really no way to scrub through it. 🤷‍♂️" console.error would save everyone some time in the future.

Link to comment
Share on other sites

13 minutes ago, corysimmons said:

So ScrollTrigger is literally just that? If you hit y coord, it triggers some anim? Fine.

That's overly simplistic but yes it's the general idea. 

 

14 minutes ago, corysimmons said:

Not being facetious but some "ScrollTrigger and GSDevtools don't play nice together because ScrollTrigger auto-triggers an animation when you hit a specific Y-coord so there's really no way to scrub through it. 🤷‍♂️" console.error would save everyone some time in the future.

That's a good suggestion. I just added a console.warn() message if you use an animation that has a ScrollTrigger applied. 

 

11 minutes ago, corysimmons said:

Please add cdpn.io to PRO-whitelisted domains. I'm trying to refresh on the bottom part of the frame so I opened the iframe url and it's throwing.

I didn't quite understand what you mean. cdpn.io is already whitelisted. Can you provide a minimal demo that shows the problem you're running into so that we can troubleshoot? 

  • Like 1
Link to comment
Share on other sites

3 minutes ago, GreenSock said:

That's a good suggestion. I just added a console.warn() message if you use an animation that has a ScrollTrigger applied. 

Awesome! You folks, and this forum format, are amazing!

 

4 minutes ago, GreenSock said:

I didn't quite understand what you mean. cdpn.io is already whitelisted. Can you provide a minimal demo that shows the problem you're running into so that we can troubleshoot? 

So I inspected DOM and opened the iframe URL in a new tab to this:

image.thumb.png.918a0c37b40d5a16cfe24ab6f868b492.png

 

It seems like refreshing fixes this warning more than half the time, but it still pops up every now and then.

Link to comment
Share on other sites

12 minutes ago, corysimmons said:

So I inspected DOM and opened the iframe URL in a new tab to this:

 

Ah, that's because it's not registering window.location.href as even coming from ANY domain (like cdpn.io) because of the way the content is injected into that iframe using srcdoc="...". See for yourself - window.location.href resolves as about:srcdoc rather than something like cdpn.io

 

I don't think we can realistically work around that without opening up a security hole that'd give people a way to circumvent the protection. See what I mean? I've actually never seen that happen on CodePen before. 

Link to comment
Share on other sites

2 hours ago, corysimmons said:

It seems like refreshing fixes this warning more than half the time, but it still pops up every now and then.

 

If you have a CodePen pro account, there is a debug view which will open up the page without the iframe.

 

image.png

 

Another option is to use CodeSandbox, which is more like a real dev environment. And all our trial plugins will work on that site too.

 

  • Like 1
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...