Jump to content
Search Community

Horizontal Scrolltrigger Scrollbar & Mac/iOS overscrolling

gn90 test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hi there, i don't know if this is the right place to ask those questions. I came across this page which is also made with GSAP https://www.sixsocks.studio/en

 

I built a similar horizontal page with Scrolltrigger. But I struggle with 2 problems (which this site mangaged to fix)

- Get rid off the overscrolling on Mac and iOS (especially when u reach the end of a webpage)

- Remove the Scrollbar (even on Windows).

 

Thanks in advance,

Gui

Link to comment
Share on other sites

  • Solution

Hello @gn90

 

They might not even be leveraging native scrolling for that website but listen to wheel/touch/keyboard events instead, but if you are going to do it with ScrollTrigger - which they aren't - this one should help with the scrollbars...

 

 

 

 

...and this one might help with the overscroll behaviour.

 

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

 

Although, now that GSAP 3.10 is out, ScrollTrigger.normalizeScroll() might be the better alternative for that - it's a whole package of goodies. Have a look at the linked docs-page for more details. Happy scrolling!

 

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

 

  • Like 1
Link to comment
Share on other sites

Oh wow normalizeScroll works perfect for the overscrolling. But i have a really weird bug since i built it into my page (just in Safari on a Mac). I have a fixed sidebar (navigation) and now when i scroll the page the sidebar is flickering like hell. i already found out that this flickering is only on pages where i have scrolltrigger contentanimations where i animate elements from y:100% or y:-100% to 0. When the animations are done the flickering gets not that bad (but still sometimes on scroll it flickers)  Is this a common problem and is there a way to fix this? (i uploaded the testpage: https://www.edgeobject.com/gsap_test/)

 

Regarding to "remove scrollbar": thank you i will have a look at it

Link to comment
Share on other sites

 

I'm afraid I can't help out with regard to Safari. Maybe try updating to the latest version (3.10.3 - you are on 3.10.2) though as it does have some recent fixes.

 

It might also be related to one of these below though, so if nothing changes for you when updating (make sure to clear your cache then, too), it would be awesome if you could create a minimal demo (really minimal - just the absolute neccessities to recreate the issue) and maybe wait if @GreenSock can add any more insight then.

 

 

 

  • Like 2
Link to comment
Share on other sites

6 hours ago, gn90 said:

I have a fixed sidebar (navigation) and now when i scroll the page the sidebar is flickering like hell.

Hm, I tried on Safari and it looked perfect. I couldn't get it to stutter even slightly. What version of Safari are you on? There's a known bug on versions before 15.4 that caused position: fixed elements to jump/stutter under heavy load (which of course should NEVER happen with a position: fixed element). It's totally unrelated to GSAP/ScrollTrigger. Here's proof: 

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

 

But Apple contacted us and said it's fixed in 15.4 which seems to be true. 🎉

 

If you're still seeing any odd behavior that you think is related to ScrollTrigger, just shoot us a minimal demo and we'd be happy to take a peek. 

  • Like 2
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.
×
×
  • Create New...