ScrollTrigger on mobile

[Lee Marshall]

Hi,

I have a web page that has a fairly long vertical page, there are trigger points that start various animations and also has interactivity embedded in the page.

Fine for desktop, however on a mobile device if I click a button or a link, to open a popup, the stupid IOS address bar keeps hiding and showing. This affects the scroll position and therefore it jumps to the new position, completely losing the flow.

 

Does any body have experience of this?

 

Thankyou

[OSUblake]

Welcome to the forums @Lee Marshall

 

There's various ways to prevent the address bar from moving, like demo should do. The only downside is the address bar will always be visible. I personally prefer having it always visible as it makes your site feel more like a native app.

 

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

 

[GreenSock]

There's also a helper function in the docs for stuff like this: 

https://greensock.com/docs/v3/HelperFunctions#scrollResize

[OSUblake]

I didn't realize that was there. Good to know as it always takes me some time to find that demo I posted.