Vertical smooth-scrollbar and horizontal scroll combined

[MartyMc]

I would love to have smooth scrolling for all non-Mac-mouse users. But then combined with a couple of horizontal scrolling sections.

Actually there is one Codepen written by Duty47 back in 2019 which does it all. But that one is too complicated for me to adjust and it is not using GSAP at all:

See the Pen vYYEgam by duty47 (@duty47) on CodePen

 

So I found

See the Pen bbfdab3b579f7a73639a7dc6a66cd67b?editors=1111 by GreenSock (@GreenSock) on CodePen

and

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

 

I'm trying to combine the scripts in order to have something like Duty47's script, but I must make a couple of mistakes. Who is able to help me? Thanks!
Maybe I'm not using the right scripts...

See the Pen PoejOYq by mdegans (@mdegans) on CodePen

[akapowl]

Hello Marty, welcome to the forum!

 

Smooth-scrollbar.js is not a GreenSock product, so support for it is not really offered here - and I think your attempt of combining it with ScrollTrigger mainly doesn't work because of not implementing it properly in the first place. So that would be something you might want to read up on over on their end. If you want the whole page to scroll smoothly, you'll need to set it up wrapping / working on the whole page, not just a portion of it.

https://idiotwu.github.io/smooth-scrollbar/

https://github.com/idiotWu/smooth-scrollbar
https://github.com/idiotWu/smooth-scrollbar/tree/develop/docs

 

Additionaly you'll need to stick to the order of things (creation of the scrollbar-instance, setting up the scrollerproxy, creating your tweens, etc.) as it is in that example from the .scrollerProxy() docs-page that you included.

 

 

 

That said, Greensock has its very own smooth-scrolling solution with ScrollSmoother that of course is much easier to combine with ScrollTrigger - but it is for Shockingly Green members and above, so maybe you'll want to consider joining the Club.

 

Here is your fake-horizontal-scrolling pen with ScrollSmoother included.

 

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

 

 

 

Also, here is an older fake-horizontal pen of mine using smooth-scrollbar.js to give you an idea for how to get started if you still want to go the 3rd party library route - maybe it will help.

 

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

 

 

 

...and here it also is in a ScrollSmoother version. Scroll responsibly and happy twenning!

 

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

 

[MartyMc]

That's awesome and really helps me further. We might consider to use the paid membership if we want to start to use more effects. But first I have to convince certain people here that it has more power (and it's way easier to implement)  so I thought I start implementen GSAP, ScrollTrigger and a third pary js.

 

But that said, I also love the SplitText effects.

Anyway: this is a great start. Thanks for the solutions and I will certainly read up on the effects. No specialist whatsoever, but I'm eager to learn!