Jump to content
Search Community

Is there a way to stop ScrollTrigger autorefresh?

jeanc16rlos test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Im Actually having a great headache trying to make my timeline based animations work in mobile, I used to overcome the issue related to mobile navbar appearing on scroll and triggering repaints, creating a context wrapper over my childs and giving them static heights based on window.innerheight, also, I created a function in my context that returns the height only if the change was larger than 100px and it works really good, my static components never jumps or blinks unless the user turns the phone on landscape mode(which is the intended behavior), but even if the elements height keeps their height static, ScrollTrigger keeps firing refresh on resize events, that makes my animations jumps and blinks every time the address bar hides/shows, the element doesnt move from his position, but during resize blinks and jumps are %$#@#$ all the experience, so I was wondering if it was any way to disable scrolltrigger auto refresh, so I can attach a manual refresh on my useEffect hook only when my context values changes (which is fixed to change only if the changes is great enough)

Link to comment
Share on other sites

  • Solution

If you just want to disable the refresh() calls that automatically get triggered by various events, you can do so like this: 

ScrollTrigger.config({
  // default is "resize,visibilitychange,DOMContentLoaded,load" so we can remove "resize" from the list:
  autoRefreshEvents: "visibilitychange,DOMContentLoaded,load"
});

Does that help? 

  • Like 8
  • Thanks 1
Link to comment
Share on other sites

unfortunately not, in fact, I managed to do this, digging on Scrolltrigger codebase yesterday and I even disabled visibilitychange and DomcontentLoaded, because I can manage those by my own in my context provider, but keeps firing the event, its kinda spooky, I attached a video of the problem, as you see, in the video the size of the elements doesnt change; also the first time that I tried to scroll the spooky resize doesnt happens, it happens latter, unconsistenly, its like Scrolltrigger adds a eventListener on window resize and everytimes the resize occurs it happes the spooky action even if autorefreshevents are just those you provided, I even experimented that issue in ScrollTrigger webpage, everytime mobile navbar hides, the animations inside the boxes calls a request animation frame, is there a way to overcome this?, im tired about my client complains :(

 

https://drive.google.com/file/d/19r3uzfIjY3zm5--RTB0pZ_bVooNxfRMF/view?usp=sharing

 

P.D. Samsung internet behavior is wayyyyy more spooky than chrome because the resize is more agressive since samsung internet has 2 navigation bars

 

P.D.D I finally managed to work around this, the problem appears to be that the browser itself causes those spooky blinks on resize events, I used the chrome remote devtools to debug this feature inside my phone and I couldnt find any hint in scrolltrigger code, so I decided to use the old trustable (body fixed and scrollable), so the navbar will not hide but also my experience will look pretty homogeneus

Link to comment
Share on other sites

Ah yes, the "resize" could get triggered a few different ways and I needed to make an adjustment internally to truly ignore all instances if you did the config() the way I showed. That should be resolved in the next release which you can preview at https://assets.codepen.io/16327/ScrollTrigger.min.js

 

That being said, I'm not exactly sure what's causing your animations to "jump" and it's tough to troubleshoot blind but please let us know if disabling the resize refresh() stuff doesn't resolve things. 

  • Like 2
Link to comment
Share on other sites

2 minutes ago, GreenSock said:

Ah yes, the "resize" could get triggered a few different ways and I needed to make an adjustment internally to truly ignore all instances if you did the config() the way I showed. That should be resolved in the next release which you can preview at https://assets.codepen.io/16327/ScrollTrigger.min.js

 

That being said, I'm not exactly sure what's causing your animations to "jump" and it's tough to troubleshoot blind but please let us know if disabling the resize refresh() stuff doesn't resolve things. 

I tried beta, but looks like its a browser behavior, that is constantly messed up my anims, so I decided to make navbar always visible, thanks for your support

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