Jump to content

Roman Baranov

ScrollTrigger with hiding browser interface on mobile

Moderator Tag

Recommended Posts

Hello everyone, have a little problem, when you are scrolling first screen on mobile, browser hide interface, and it's a resize, so while you are scrolling, animation OK, but when you are stop - animation recalculate without any transition. I know it's not a bug, it's a expected behaviour, but what I can do with it?

Example - https://495.vodka/ section with a plane with cloud, sorry it's not a codepen, but I think it's more comfortable from mobile, if need can do something on codepen.

Link to comment
Share on other sites

As far as I can tell, it's a logical impossibility. If your layout depends on the screen height and the browser changes that screen hight by adding/removing the browser chrome when swiping in a certain direction, that by definition changes the size and therefore your layout is affected. I don't know of a magical fix to make it resize to fit the screen but not cause anything to reflow. See what I mean? 


Maybe someone else has an idea other than just not having your layout depend on the viewport size (or maybe lock it in after the initial load). 

  • Like 1
Link to comment
Share on other sites

Thanks for reply, yeah I'm also think it's not possible, just think maybe someone have any ideas.

Link to comment
Share on other sites

I would think If the height is known at the start and it's a mobile device where you won't manually change screen size you could store it as a flag variable at the start and key the heights the elements to that value rather than a dynamic screen height. I think Jack alluded to that.


One other idea is to calculate all height based on a ratio of screen width i.e. the vw unit. This is  great way to maintain the aspect ratio of elements. This won't scale dynamically to fit a screen height but it will retain the relative size and aspect ratio.


This article might help too.



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.