Problem with ScrollTrigger on Chrome mobile

[msnl 0 Likes (Newbie)]

While making that codepen i noticed that my issue is not present there and that made me realize that it may have to do, as usual, with the url bar, which is not hidden/shown but always present in full page view.

The problem is that when the navbar appears and disappears it triggers "adjustments" after the scrolling is done while using gsap to change backgroundPositionY .

It also seems to mess with the start and end points.

 

I'm using Chrome on Android.

Can anyone confirm?

See the Pen WNrYdPe by msnl (@msnl) on CodePen

[GreenSock 18,885 Likes (Superhero)]

I'm not sure I follow your question, but perhaps it'd help if I explain something...

 

Some mobile browsers show the window chrome (like address bar, etc.) initially but then if you start scrolling down, it hides that which means that the page RESIZES...which also affects where start/end values get calculated, etc. ScrollTrigger automatically does that for you whenever there's a resize BUT if a resize happens WHILE scrolling (as is the case here), it will defer that until the scroll completes so that there's not a sudden shift that happens during scroll and it doesn't kill any momentum scrolling effects. 

 

You're welcome to FORCE a refresh() immediately when there's a resize if you prefer. Just add a resize event listener to the window and in the handler, call ScrollTrigger.refresh(). 

 

Does that help at all? 

[msnl 0 Likes (Newbie)]

Oh, so that's an expected behaviour, thanks.

 

 

 

[Soufiane LASRI 4 Likes (Newbie)]

Hi @GreenSock,

 

I'm facing the same issue as @msnl

Is there a way to prevent ScrollTrigger from listening to the viewport resizing when scrolling on mobile?

 

Regards

[GreenSock 18,885 Likes (Superhero)]

24 minutes ago, Soufiane LASRI said:

Is there a way to prevent ScrollTrigger from listening to the viewport resizing when scrolling on mobile?

In the upcoming release, yes. You'll be able to set which events automatically trigger refresh(). By default, ScrollTrigger will refresh() on the following events: "visibilitychange,DOMContentLoaded,load,resize" but you can set it to a subset of those if you prefer using ScrollTrigger.config(). For example, if you don't want it to refresh() on resize, you could:

ScrollTrigger.config({
  autoRefreshEvents: "visibilitychange,DOMContentLoaded,load" // notice "resize" isn't in the list
});

You can preview the beta at https://assets.codepen.io/16327/ScrollTrigger.min.js

[Soufiane LASRI 4 Likes (Newbie)]

@GreenSock that works like a charm in my case, thanks a lot

You guys are insane!

[ThaoD5 0 Likes (Newbie)]

Hey @GreenSock
Used the beta for the use case of @Soufiane LASRI but unfortunately the refresh is still happening, I removed everything and just kept the scrollTrigger section without using vh but unfortunately, the refresh is still making my One Plus 6T phone jump.
I thought it could be interesting to point out to you guys that this feature still appears as WIP on my side, is there anything else we could do to prevent refreshes to happen on resizes ( mobile ). ?

 

Thanks a lot,

[ZachSaucier 7,162 Likes (Superhero)]

Hey @ThaoD5 and welcome to the GreenSock forums. Can you please create a minimal demo of the issue for us to test?

[GreenSock 18,885 Likes (Superhero)]

@ThaoD5 yeah, I wonder if maybe you had a cached file or something? Or perhaps there's a different event that's causing the refresh in your case. It's super difficult to troubleshoot blind, so like Zach said it'd be great if you could provide a minimal demo for us to peek at. Thanks!

[Argodio 0 Likes (Newbie)]

i got same issues here...

i used codesandbox.io for a code demo, which it can be play on android without framing.

 

I wanted to make a scroll-snap using scrollTrigger, on elements inside a div.container.

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* For Container */
.main { 
  overflow-y: scroll;
  -webkit-overflow-scrolling:touch;
  height: 100%;
  scroll-behavior: smooth;
}
.panel {
  position: relative;
  height: 100%;
  top: 0;
  background-color: aqua;
  border: 1px solid black;
}

This method can keep mobile chrome address bar show when scrollUp or scrolldown. Because the body isnt scroll, but the .main container do the sroll. 

 

https://flgwm.csb.app/

 

 

[skillfullbus 0 Likes (Newbie)]

On 12/3/2020 at 11:35 PM, GreenSock said:

In the upcoming release, yes. You'll be able to set which events automatically trigger refresh(). By default, ScrollTrigger will refresh() on the following events: "visibilitychange,DOMContentLoaded,load,resize" but you can set it to a subset of those if you prefer using ScrollTrigger.config(). For example, if you don't want it to refresh() on resize, you could:

ScrollTrigger.config({
  autoRefreshEvents: "visibilitychange,DOMContentLoaded,load" // notice "resize" isn't in the list
});

You can preview the beta at https://assets.codepen.io/16327/ScrollTrigger.min.js

Hi Jack,

By when can we expect this fix to be released officially?  I guess a lot of people need this fix.

 

Thanks!

[GreenSock 18,885 Likes (Superhero)]

You're welcome to use the beta file for now - nothing should hold you up from using it. We've been working feverishly on a new plugin that'll be in this next big release which we're planning to put out there the first week of January. Mark your calendar. The new plugin is pretty cool

[skillfullbus 0 Likes (Newbie)]

3 hours ago, GreenSock said:

You're welcome to use the beta file for now - nothing should hold you up from using it. We've been working feverishly on a new plugin that'll be in this next big release which we're planning to put out there the first week of January. Mark your calendar. The new plugin is pretty cool

Great, would this be a plugin that I can use with the existing implementation of ScrollTrigger ? Also where can I find the non-minified code of the beta version? Currently if I rename the file path to ScrollTrigger.js instead on ScrollTriger.min.js its going to an older version. Thanks !

[ZachSaucier 7,162 Likes (Superhero)]

3 hours ago, skillfullbus said:

would this be a plugin that I can use with the existing implementation of ScrollTrigger ?

Sure, you could combine them if you'd like. Its purpose is quite different than ScrollTrigger though  It enables you to make dynamic state transitions with ease.

 

3 hours ago, skillfullbus said:

where can I find the non-minified code of the beta version?

Why do you want that? You should stick to using the minified version in your products.

[skillfullbus 0 Likes (Newbie)]

1 hour ago, ZachSaucier said:

Why do you want that? You should stick to using the minified version in your products.

Yes, I'll be using the minified version on the site. However, wanted to understand the changes included in the patch version for official reasons as I'm not including it from npm package anymore and need to convince folks  

 

1 hour ago, ZachSaucier said:

Its purpose is quite different than ScrollTrigger though

Ok, however, will it help resolve the refresh issue mentioned in the thread above? If not, will we have : autoRefreshEvents  included in the upcoming release of ScrollTrigger? I'm using ScrollTrigger as an npm package and would like to update it as soon as the release is done. Meanwhile, I'm including the patch version via local folder. However,  I would like to use the updated version of ScrollTrigger when it gets released. (in Jan?). Thanks for your reply!

[GreenSock 18,885 Likes (Superhero)]

Here's a .tgz file of the beta that you can npm install (it has all the unminified files and ES Modules): https://assets.codepen.io/16327/gsap-beta.tgz

 

Yes, the upcoming release of ScrollTrigger has the autoRefreshEvents functionality. 

[Joyboy 2 Likes (Newbie)]

On 12/3/2020 at 3:05 PM, GreenSock said:

In the upcoming release, yes. You'll be able to set which events automatically trigger refresh(). By default, ScrollTrigger will refresh() on the following events: "visibilitychange,DOMContentLoaded,load,resize" but you can set it to a subset of those if you prefer using ScrollTrigger.config(). For example, if you don't want it to refresh() on resize, you could:

ScrollTrigger.config({
  autoRefreshEvents: "visibilitychange,DOMContentLoaded,load" // notice "resize" isn't in the list
});

You can preview the beta at https://assets.codepen.io/16327/ScrollTrigger.min.js

Hi! Just facing a similar problem in 2023. I was wondering if there's any better way to do this now, and if so, if it's possible to only ignore vertical/horizontal resize.

[GreenSock 18,885 Likes (Superhero)]

1 hour ago, Joyboy said:

Hi! Just facing a similar problem in 2023. I was wondering if there's any better way to do this now, and if so, if it's possible to only ignore vertical/horizontal resize.

Could you elaborate a bit on what exactly you're trying to solve? 

 

There are several things we've added to help address these challenges: 

ScrollTrigger.config({ ignoreMobileResize: true });

And: 

ScrollTrigger.normalizeScroll(true);

Does that help? 

[Micah Chukwudobe 0 Likes (Newbie)]

Hello, I'm also having problem with chrome mobile here in 2023, I've used the above solution you provided but it didn't work for me. 

I'm working with vite + react & gsap/gsap scrolltrigger. 

Please send help. 

[GreenSock 18,885 Likes (Superhero)]

@Micah Chukwudobe I noticed you've hijacked a bunch of different threads saying you're struggling, but you haven't provided any minimal demo or clear description of the issue - if you'd like some help, please make sure you are very specific about the issue and provide a minimal demo (like a CodePen or Stackblitz). We'd love to help with any GSAP-specific questions.