Jump to content
Search Community

How to kill() and enable() properly on window resize?

AsKadir test
Moderator Tag

Recommended Posts

Hi again!

Now I have another issue with window resize,

When I reduce window size, the ScrollTrigger doesn't kill() itself,

what am I doing wrong?

 

What's working:

if I refresh page with small window size, ScrollTrigger is killed and when I increase window size it enables ScrollTrigger,

but not in reverse direction with window size deacreasing.

 

Can you help me, please?

See the Pen pogwGwV by ChicagoJostik (@ChicagoJostik) on CodePen

Link to comment
Share on other sites

12 minutes ago, ZachSaucier said:

The opposite of .enable() is .disable(), not .kill(). The opposite of .create() is .kill()

@ZachSaucier I tried disable(), but the same result.

 

With this new method everything is working great!

How do you think when new gsap release will be?

I'm finishing up my wordpress theme, but I would like to use this method very much.

Link to comment
Share on other sites

7 minutes ago, AslanGoi said:

How do you think when new gsap release will be?

We hope to release it in the next week or two.

 

7 minutes ago, AslanGoi said:

I'm finishing up my wordpress theme, but I would like to use this method very much.

You're welcome to use the beta version in your project. Just know that there may or may not be bugs in it :) 

  • Haha 1
Link to comment
Share on other sites

41 minutes ago, Koa'link said:

Works like a charm... in Chrome.
But it's buggy in Firefox.
Let us know when and where we can test a new beta release :-)
However it's an exalting good new feature !

@Koa'link What's buggy in Firefox? Can you please be very specific? A reduced test case in CodePen would be ideal. How can we replicate the problem you're seeing? 

Link to comment
Share on other sites

There may have been some misunderstanding caused by Zach accidentally labeling things incorrectly in that CodePen. the original post was aimed at having the ScrollTrigger active on screens at least 1024px wide, but Zach's demo had that inverted and the comments said "desktop" when it was actually "mobile", and it said "for screens bigger than 800px" when it was actually set up for screens smaller than 1024. I've corrected that now. 

 

But again, if you notice any odd behavior in Firefox, please let us know. I just tested that demo in Firefox and it worked exactly the same as in Chrome as far as I can tell. 

Link to comment
Share on other sites

See the Pen wvMqwby by Koalink (@Koalink) on CodePen

 

The problem I encounter is only in Firefox :

  • Loading the page with a window size less than 960px.
  • Scrolling 200px to see the animation on the "logo" (scaled at 50%).
  • Resize the window and the problem appears: markers remain visible, the "logo" is still at 50%, scrolling at the top still activates the animation.

Do you see the same bug?

  • Thanks 1
Link to comment
Share on other sites

12 hours ago, Koa'link said:

The problem I encounter is only in Firefox :

  • Loading the page with a window size less than 960px.
  • Scrolling 200px to see the animation on the "logo" (scaled at 50%).
  • Resize the window and the problem appears: markers remain visible, the "logo" is still at 50%, scrolling at the top still activates the animation.

Do you see the same bug?

Ah, good catch. This is due to a Firefox bug that causes it not to correctly update the "matches" property of the MediaQueryList. Proof: 

See the Pen a032bd02b4a8802b07f65a3b2a814002?editors=0011 by GreenSock (@GreenSock) on CodePen

 

I've implemented a workaround now, so it should work great in Firefox too. Let me know if you notice any other issues. Thanks!

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