Jump to content
GreenSock

jackkemm

ScrollTrigger/ScrollSmoother normalizeScroll & ignoreMobileResize

Recommended Posts

Hi there,

 

I am looking for a recomendation.

 

In the docs, both normalizeScroll & ignoreMobileResize are mentioned for both ScrollTrigger and ScrollSmoother. I am using both on a site and was wondering where would be best to set them, for either ScrollTrigger or ScrollSmoother.

 

I have tested in both scenarios and they seemingly work better in one than the other. There are cases when it's set on ScrollSmoother and the screen may jump a little, or in ScrollTrigger the address bar can still hide/show.

 

Not sure if there's a best practise for this?

 

Thanks in advance.

 

Jack

Link to comment
Share on other sites

Hi,

 

Keep in mind that ScrollSmoother uses ScrollTrigger behind the scenes, since you can create a ScrollSmoother instance without creating a ScrollTrigger one. That being said it shouldn't really matter where you set that up as it should work as expected regardless of which constructor you're using.

 

I'm curious about the behaviour you describe, could you please provide a minimal demo that illustrates those issues by forking this codepen:

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

 

Also please let us know which devices, OS and browser you're seeing this behaviour.

 

Happy Tweening! 

Link to comment
Share on other sites

Hi Rodrigo,

 

Thanks for the reply!

 

Okay noted, so in theory either place should be fine.

 

In the attached example I am doing it via ScrollTrigger and have commented the ScrollSmoother variation out. The Codepen is very stripped back, and it's not as obvious as on the full website I am building, but you can see slight jittering, which is much more obvious on the website I am buidling.

 

See the Pen wvxmrMV by jackkemm (@jackkemm) on CodePen

 

I can mainly replicate when I scroll up and down a few times, it seems it can take some time for it to catch up. Not sure if this is an issue too, but in the example the markers are jumping around a lot too.

 

In terms of devices, the main place I have found the biggest issue as I know it is the biggest pain, an iPhone (I am using a 12) using Safari 🥲

 

The normalizeScroll and ignoreMobileResize features are a great idea so would love to use them!

 

Thanks,

Jack

Link to comment
Share on other sites

Hi,

 

Unfortunately I don't have a iOS device so I can't test that. Hopefully another user with an iPhone could chime in.

 

What you could try though is add a will-change property to the smooth content element or to the elements that you see jittering:

#smooth-content {
  will-change: transform;
}

Let us know how that works.

Happy Tweening!

Link to comment
Share on other sites

Hi Rodrigo,

 

Sadly that'sa not massively helped. I am still seeing jumping in the codepen, and in the website I am building.

 

Just to note I am using the latest verion of GSAP in both too.

 

Thanks,
Jack

Link to comment
Share on other sites

Just a note that normalizeScroll is just our best attempt at getting around some buggy behaviour on IOS. It can help to avoid some issues, but similarly, it can cause other issues to crop up. It's not a silver bullet and it's not recommended for every use case.

My advice would be to use ScrollSmoother without normalizeScroll as the default - only add it if you run into issues (specifically any of the safari scroll bugs listed on this page.

 

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

It's also usually best to avoid smooth scrolling on mobile. Occasions where smooth scrolling & normalise scroll are useful on mobile are largely down to sites that do a lot of pinning/parallax and webGL sites where the scroll needs to be synched.

We'll obviously look into this and do our best to figure it out - But I thought it was worth mentioning that the jitter might just be solved for you by avoiding the use of normalizeScroll in the first place!

  • Like 1
Link to comment
Share on other sites

Hi Cassie,

 

Fully understand that! It can be a massive pain to try combat I saw you guys mentioned it in the docs.

 

I am doing numerous pinned sections, so the normalizeScroll and ignoreMobileResize were seemingly the answer as there is more shifiting without them due to the address bar resizing, but still not quite right.

 

Thanks for looking into it. It happens that sometimes the normalizeScroll addition isn't always 100% perfect as the address bar may still shrink when it starts jittering.

 

Thanks,

Jack

Link to comment
Share on other sites

  • 2 weeks later...

Hi there,

 

Looking to restart this as I have gone for alternative solution and almost there, I think it's just a scroll syncing issue.

 

I have opted to use Lenis for the smooth scrolling now due to us having many accordions on the site, the height being added to the body is causing unwanted jumping on open close.

 

I have also now opted to prevent the address bar on mobile devices from shrinking by using this helper https://greensock.com/docs/v3/HelperFunctions#scrollResize - in our case the normalizeScroll feature just wasn't working for us.

 

Because I am doing the above, I need to pass a .scroller to the ScrollTrigger's I am creating which is the main #viewport, and then need to pass the wrapper and its content to Lenis. I have followed the docs and seen numerous examples, desktop works as expected, no jumping. Checking on mobile, the pinned sections and their text are jumping all over and wondering if there's a syncing issue I may have missed?

 

I can also confirm if I don't try to prevent the address bar from hiding it works fine, but I am back to square one with the mobile issue.

 

Here is the jittery example with mobile address bar 'fix' & .scroller:

See the Pen rNrPNVP by jackkemm (@jackkemm) on CodePen

Debug view for actual mobile testing: https://cdpn.io/pen/debug/rNrPNVP

 

Here is the example without 'fix' and no .scroller:

See the Pen mdjvdop by jackkemm (@jackkemm) on CodePen

Debug view for actual mobile testing: https://cdpn.io/pen/debug/mdjvdop

 

Thanks in advance :D

 

Jack

Link to comment
Share on other sites

Me again...

 

Did some more digging and turns out setting pinType: 'fixed' in my use case done the trick 👌

 

Found it here

 

So smooth now!

 

Thanks,

Jack

  • Like 1
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.
×