Horizontal Scrollbar for horizontal scrolling Sections

[Zisis]

I am playing with horizontal scrolling, sticky sections. All is good and well... but... I noticed that the horizontal scroll bar (the default browser one) doesn't move sideways while scrolling. It remains idle. I can click on it and move it sideways to horizontally scroll between the sections but ideally I'd like it to follow the scrolling, as the user scrolls with the mousewheel. Is this possible? 

See the Pen xxyxRvp by zisis-the-vuer (@zisis-the-vuer) on CodePen

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[mvaneijgen]

Hi @Zisis welcome to the forum!

 

Most people choose to fake the horizontal scrolling by hooking it up to ScrollTrigger and moving the container in the x direction over a certain scroll distance. Here is the first example from the ScrollTrigger demo's page https://greensock.com/st-demos/ (there are a lot more if you are looking for inspiration) 

 

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

[Zisis]

I have edited my question with a very simple codepen... 
So actually the most probable solution would be to remove the overflow-x: auto css from the parent element of the sections which will remove the horizontal scrollbar completely... 

[mvaneijgen]

1 hour ago, Zisis said:

I'd like it to follow the scrolling, as the user scrolls with the mousewheel. Is this possible? 

I don't think so. Not with this setup. We're transforming the x position of the container,  it is not really scrolling. I've seen other people create a fake scroll element (kinda like a progress bar) that also updates on scroll. Something like discussed in this topic, but this will require a lot of custom setup and is not something I recommend someone starting out with GSAP/ScrollTrigger to get in to. But maybe someone else here has a good idea. 

 

 

Here I've forked your pen, setup the makers, disabled the scrollbars and add an extra spacer, so we can scroll all the way down. 

 

See the Pen bGmGgXq by mvaneijgen (@mvaneijgen) on CodePen

[Zisis]

I see, ok, I will play around with this setup then. Thank you for your help