Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
cbravo

Scrolltrigger and mobile navbar

Recommended Posts

Posted (edited)

Hello, I am seeing a problem that I am trying to understand a bit better and I hope you can shed some light.  The codepen  I have attached  shows a red square that animates down the page and then hits a "target headline" and animates upward to stay with the headline.  The problem is when you are viewing the pen on a mobile device you can see the square jumping out of position when the bottom navbar appears and disappears. In order to get the mobile bar to appear  you need to view the codepen in debug mode which means you will need to fork the codepen  and set it to debug mode on your mobile device to get rid of the iframe or else you will not be able to reproduce. Is this the expected behavior?  Is the navbar triggering the scrolltrigger to refresh and somehow causing this?

See the Pen BajeGqg by bravoclicks (@bravoclicks) on CodePen

Edited by cbravo
updated reproduction instructions

Share this post


Link to post
Share on other sites

I have an iPhone X and I am seeing the jumping on chrome and safari on that device. I am just noticing that the debug link i provided is going to a page that says its expired.  I am just finding out that you will need to fork my codepen and view it in your own debug mode as I am not  a pro member and sharing debug mode links is only for  pro members.   The reason why I provided that link is so you can view the demo without an  embedded iframe around it. That is the only way to actually trigger the mobile ios navbar coming in and out of the screen on scroll.  Let me know if you need more clarity on reproduction steps.  I attached a picture of the safari navbar just for clarity on what I mean

image.png

Share this post


Link to post
Share on other sites

Hey cbravo. I believe that this refresh is inevitable because the browser reports that the viewport size has changed. What are you expecting it to do instead?

Share this post


Link to post
Share on other sites

I think the refreshing is expected but I am confused by why the refresh is causing a jump in position. It no longer is aligned with the title after the mobile bar appears / disappears and that is what is the part I am trying to get clarity on. Maybe it is behaving exactly as it should and I just don't understand what is happening.

Share this post


Link to post
Share on other sites

 

Don't know if I understood the problem correctly...

But might this be related to using vh-related values for certain elements? 

 

I remember @OSUblake posting in a different thread, that "100vh might not be what you think in mobile" with a link to this page:

https://github.com/bokand/URLBarSizing

 

Since the v(iewport)h(eight) changes when the browser built-in navbar appears/disappears (different handling on each mobile browser) the elements get repositioned respecting those new values which might be causing the jumps you refer to.

 

  • Like 5

Share this post


Link to post
Share on other sites
Posted (edited)

@akapowl @ZachSaucier That makes sense... but even with that in mind, looking at the code I have, shouldn't the red circle stick with the headline even when the mobile navbar showing OR hiding?   I would expect that it should behave the same way on desktop and mobile with regards to positioning relative to the target headline since thats what the scrollTriggers are based on?  here is an example of the misalignment on mobile I am seeing:

 image.thumb.png.b39a6dd81b648376e1161ba1865b2a16.png

Edited by cbravo
screenshot

Share this post


Link to post
Share on other sites

Here's a stab in the dark... usually after I try this Jack comes along and tells us what's really happening. 

 

I haven't had much time to look at ScrollTrigger yet but it looks to me that the position of the animating object is being set relative to the screen height with getYposition() while the scrollTrigger is set to an element in a specific offset position in the DOM. This is fine to start with as they maintain the same relative positions to one another if the screen remains the same, but their relative positions change when the screen height changes. I guess it could also go out of position on screen width change as well, as the offset position of the Trigger end target could change with reflow.

 

Assuming I'm right you might want to trigger a rebuild of the animations on screen resize, assuming there's not something already built into scrolltrigger to help with this.

 

 

  • Like 1

Share this post


Link to post
Share on other sites

@Visual-Q I believe it automatically recalculates on window reize as per the docs:   

Quote

Automatically recalculates positions when the window resizes.

I tweaked the codepen so that the dimensions it uses are no longer based on window.innerHeight and window.innerWidth  but based on the dimensions of the 100vh and 100% container which should not change when the mobile nav bar is showing or not (I could be wrong but I am pretty sure 100vh ignores the mobile nav bar).  With these new changes I am still seeing a jump that for the life a me I don't really understand. What I would be expecting is that the mobile navbar showing or hiding would cause a scrollTrigger refresh and the dot would be put back in the correct place.

Share this post


Link to post
Share on other sites

No, I don't think that's true - 100vh factors in the mobile nav bar, thus it changes in this case.

 

Also keep in mind that ScrollTrigger will WAIT to do the refresh if the resize happens WHILE scrolling (which would be the case here), otherwise there would be a sudden jump and it'd stop the momentum-scrolling. We figured most people would prefer the behavior of waiting for the momentum scroll to stop before doing the refresh(), but of course you can manually override this by setting up your own resize handler and calling ScrollTrigger.refresh() at that point. 

  • Like 2

Share this post


Link to post
Share on other sites

Hey @GreenSock Are you sure that 100vh changes with the mobile nav bar? I know that window.innerHeight updates its value to reflect that there is less screen height when the mobile bar is showing but I think 100vh always is the height of the browser with all toolbars missing.  This is by design to avoid the layout moving up and down as you scroll (https://developers.google.com/web/updates/2016/12/url-bar-resizing)    This is a pretty old article so maybe things have changed. Ill try making a pen to make sure.

Share this post


Link to post
Share on other sites

Yep, I've definitely seen it behave that way. There may be various browsers that behave in different ways too. Annoying, I know. 

  • Like 1

Share this post


Link to post
Share on other sites

Okay  @GreenSock I updated my codepen to show the height of a 100vh element vs window.innerHeight  on the resize event. If you view the pen in debug mode you will see that they read different results (100vh will stay constant and innerHeight will change).     I am not even sure if this is even related to reason I opened this topic but just in case it is I have included a screenshot or you can fork my pen and view it in debug mode to see for yourself.  I tested this in chrome and safari on my iPhoneX. Can any android users out there confirm it is the same for them?

To address your other point about waiting until after the scroll to fire the refresh of ScrollTrigger  that is probably the correct behavior. But once that refresh is done shouldn't my dot be in the correct place?  Maybe I need a good nights sleep to wrap my mind around it but its just not clicking for me why it would not refresh to the right location.

 

Screenshot: 

image.thumb.png.0dd9dcfd29cc760c5121146befa2dd0d.png

Share this post


Link to post
Share on other sites

Samsung Internet on Android 10 - Galaxy Note 10: 

Both values change when browser bar dissapears.

 

It definitely does on some browsers - others behave differently.

This has been an issue ever since vh-units have been introduced I think.

 

I have tried finding a way around this myself for a veeeeeery long time - and the only 'solution' - more like a workaround with caveats - I found for myself, was preventing the browser from removing its navbars on scroll altogether.

 

 

There's an interesting attempt to tackling that issue over on CSS-Tricks:

https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

( written by @Mamboleoo if I am not mistaken )

 

 

...and another one here:

https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/

 

 

...for furhter reading on that topic, I also recommend the following:

https://nicolas-hoizey.com/articles/2015/02/18/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers/

 

  • Like 5

Share this post


Link to post
Share on other sites

I have a question for you @akapowl  if you don't mind. On the browser where BOTH values change...do you see the red circle "stick" to the target headline in the wrong place?  and conversely if you have a browser where the values do not both change (maybe chrome on android?)  do you see the same behavior?

Share this post


Link to post
Share on other sites

 

On Chrome only the window.innerHeight changes.

 

When first swiping down a bit, so the browser-bar disappears and the resize happens and THEN swiping furhter down to the point where the circle should stick, it sticks as you'd expect.

 

But when swiping down immediately to the point where the circle should stick, it doesn't stick but sort of hovers below the headline and pans with the scroll (sort of like the behaviour when resizing on desktop - see below for that) and then jumps into place after the resize happened.

 

 

 

On the Samsung browser (where both values change) when scrolling to the point immediately the circle will 'stick' above the headline and after the resize jump into place.

 

But when first swiping down a bit, letting the resize happen, and then scrolling to the point, it will not really stick at all but have that paralax-pan-feel (sort of like the behaviour when resizing on desktop - see below for that) - it will jump down after the resize but not in place with the headline but instead below it - and it keeps the paralax-pan-feel.

 

 

 

Unfortunately, I can not see any consistency there...

There is just too many possibile scenarios with different outcomes. 

 

 

 

Another thing I noticed though, is, that on desktop, when you resize the window, the circle wont really stick to the headline anymore either - it will sort of 'pan' above it in a paralax sort of way. 

 

So, I think, there really might be more than one problem occuring at the same time.

 

 

  • Like 2

Share this post


Link to post
Share on other sites

@akapowl I just want to say how appreciative I am for you to take the time to give me a detailed response! Thank you for that!  I think you are right... I think there is definitely more than one problem happening at the same time. 😓  It's hard to figure it out. I know for sure the mobile bar resize is one of the issues affecting this.

Somewhat related (maybe?):  I have been playing around some more and discovered that the mobile bar has affected pinned elements too @GreenSock
.  on the greensock promotional page for scrolltrigger I was able to get the Mario element to jump out of its container when the mobile bar appears / disappears:  
image.png.613a5d878dd030a660fc7b73e712538d.png

  • Like 1

Share this post


Link to post
Share on other sites
6 minutes ago, cbravo said:

on the greensock promotional page for scrolltrigger I was able to get the Mario element to jump out of its container when the mobile bar appears / disappears

What device are you on? iPhone X still? On my iPhone 8 iOS 13.6 I can't get it to do that.

Share this post


Link to post
Share on other sites

Yes @ZachSaucier iPhoneX is correct.  I was able to reproduce on both chrome and safari.  Its actually kinda tricky to get it to do it but  you have to scroll up from the bottom and get the mobile bar too appear (it only shows up when you scroll upwards a certain amount fast enough) while Mario is at the bottom of his pinned container and he pops out.   My gut feeling is that in these browsers where window.innerHeight changes when the bar appears and disappears BUT the content doesn't shift up and down along with that change of window.InnerHeight things can become misaligned but thats just a guess. 

Share this post


Link to post
Share on other sites

I can confirm the same happening on Samsung Internet - Android 10 - Galaxy Note 10

 

Screenshot_20200819-183353_Samsung Internet.jpg

 

 

Share this post


Link to post
Share on other sites

@cbravo @akapowl Are you saying that it stays out of position? or that it just is out of position briefly (before ST updates)? On my older Android I can get it to be out of position temporarily.

 

If you're just saying it's out of position temporarily there's nothing that we can do about that. If you're saying it's there permanently then there might be something we can fix.

Share this post


Link to post
Share on other sites

From what I can tell It stays in the wrong position until the next resize call... so I can scroll upwards and the animation will play out of position. (Mario will spin outside of the box while moving upwards). However if you scroll downward the mobile navbar starts to disappear causing a resize which fixes the misalignment.

Share this post


Link to post
Share on other sites

 

It definitely stayed out of position after ScrollTrigger updated @ZachSaucier ...  a handful of seconds passed before that screenshot was taken.

 

Edit: Got to reproduce it (really had to push it to get the browser bar to appear) and it seems that this doesn't always happen but only when Mario or the container he is in, are at a certain position and/or depending on the speed of the swipe. When it happens though, it behaves just as cbravo described above.

 

Sometimes he is out of position - as in: not centered horizontally in the box, when making his moves from top to bottom and the other way around - but THAT resolves when ScrollTrigger updates.

 

Share this post


Link to post
Share on other sites

I was observing various similar behaviours manaully changing window height in the browser on desktop as akapowl noted. Mario will jump out of position  too in gsap demo sometimes right out of the container with manual resizes though he snaps back in place on next scroll. 

Share this post


Link to post
Share on other sites

I'm not really seeing that behavior on my devices. Can one of you please try to create a minimal demo of the pinning issue?

Share this post


Link to post
Share on other sites

Made one trying to somewhat work with the code on your page and could recreate the problem @ZachSaucier

 

See the Pen jOqMKXx by akapowl (@akapowl) on CodePen

 

Screenshot_20200820-002403_Samsung Internet.jpg

  • Thanks 1

Share this post


Link to post
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.

×