Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
AslanGoi

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

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 post
Share on other sites

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

 

With that being said, we recommend using a new method called .matchMedia() for situations like this. It's still under development but here's how you'd use it:

See the Pen JjGJzpE?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Thanks 1
Link to post
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 post
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 post
Share on other sites
2 minutes ago, ZachSaucier said:

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

Thanks a lot!!!

Link to post
Share on other sites

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 !

Link to post
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 post
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 post
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 post
Share on other sites
5 hours ago, Koa'link said:

Do you see the same bug?

I do not. Make sure to hard refresh? What OS are you on?

Link to post
Share on other sites

I have tried on Windows 10 with Mozilla Firefox 78 (64bits) (2 different computers) and on my Android tablet with Firefox. Same bug even with empty cache.

Link to post
Share on other sites

Can confirm it doesn't revert properly in FF on Windows. We'll get it fixed ASAP.

Link to post
Share on other sites
Just now, ZachSaucier said:

Can confirm it doesn't revert properly in FF on Windows. We'll get it fixed ASAP.

Thanks :-)

Link to post
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 post
Share on other sites

Everything seems to work great by now :-D

Thank you again for all.

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

×