Scrolltrigger Viewport on Mobile (Chrome, Safari)

[DettaglioStudio]

I don't know if it's a bug or because I'm not familiar with scroll triggers yet.

I am developing a site in Nuxt2 and using scorltriggers to animate the input and output text.

Using the property "markers: true" I noticed that on mobile (chrome and safari for mobile) both have bars above and below that as soon as you scroll they get smaller and consequently the viewport changes and moreover if it changes quickly scrolling all the elements do chaos and do not respect the logic of the codepen code.

How can I solve the problem?

See the Pen pojzxwZ by GreenSock (@GreenSock) on CodePen

[Rodrigo]

Hi,

 

Try using the Normalize Scroll method:

ScrollTrigger.normalizeScroll(true);

You can read more about it here:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()

 

Also always remember to have the latest version of GSAP in your project. If you keep having issues, please include a minimal demo so we can take a better look.

 

Happy Tweening!

[DettaglioStudio]

It doesn't work indeed, it makes things worse ... I can't create a mini demo on codepen because the bugs concern the mobile and through the developer tools it works (responsive mode), that's what I don't understand, only when you open it from mobile has problems.
If you want i can send you in private the repo link and than write here the solution for the comunity.

[Rodrigo]

Hi,

 

Be sure to use the latest version of GSAP.

 

If you can an alternative could be a video showing the actual issue so we can take a peek at it and perhaps a live URL where we can see the deployed app. Is not ideal but at least is something.

 

Unfortunately I don't have an iOS device so I can't help you on that. On android normalize scroll does what is expected, that is, handling the  brwser's top/bottom bar to prevent height changes and ScrollTrigger getting out of sync because of it:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()

 

Another option could be to use the config static method to ignore mobile resize under a minimal threshold:

ScrollTrigger.config({ 
  ignoreMobileResize: true
});

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.config()

 

Unfortunately without a minimal demo we can't do a lot.

 

Let us know if you have more questions.

 

Happy Tweening!