Jump to content
Search Community

Problem with ScrollTrigger on Chrome mobile

msnl test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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? 

  • Like 1
Link to comment
Share on other sites

  • 4 months later...
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

  • Like 3
Link to comment
Share on other sites

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,

Link to comment
Share on other sites

  • 2 weeks later...

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/

 

 

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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 !

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

  • 2 years later...
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.

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

  • 1 month later...

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

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