GSAP ScrollSmoother on inner div with horizontal overflow-x: scroll

[Something Strange]

Hi all,

 

I see a ton of demos about pinning a horizontal section to allow you to scroll vertically through a horizontal section, but is there any way to skip the pinning part, and going way back to the basics - just add a smooth scroll to an inner div with overflow-x: scroll?

 

I'd like to just scroll normally / native up and down the page, but when you're over the blue section, allow you to smoothly scroll left to right. Again, I'm not trying to pin or allow you to scroll up and down to go through this section.

 

Thanks!

See the Pen Jjwyomr by something-strange (@something-strange) on CodePen

[GreenSock]

Are you saying you only want to apply ScrollSmoother to a nested <div> that scrolls horizontally? If so, no, ScrollSmoother is made for vertically scrolling the entire page. Sorry. There are a whole bunch of complexities and magic is has to apply to do that properly. It can't be done in the same way for a nested <div>. 

 

Technically you could probably sense wheel/touch events (maybe with Observer plugin or just vanilla), prevent the default behavior in the event (event.preventDefault()) and tween the scrollLeft value. Not exactly simple, but probably feasible with some elbow grease

[Something Strange]

Hey @GreenSock,

 

Correct, you made sense of my words, hah!

 

I will check out the Observer plugin (never used this one yet). I like the idea of tweening the scrollLeft value...

 

If you happen to think of any demos that does something similar to this idea, please shoot over a link. And if I come up with some solution, I'll post a follow up demo of course.

 

Thanks for the quick reply. Tween yeah! 

[GreenSock]

I can't think of any demos at the moment, but since you'd be constantly updating the destination scrollLeft property on every wheel/touch event, instead of creating a new tween instance each time (gsap.to(...)), I'd strongly recommend using a gsap.quickTo() because it simplifies things and also is more performant. 👍

[Something Strange]

Right on, thanks for the quick idea!