Infinite horizontal scrolling... but with ScrollSmoother?

[Mattrudd]

Apologies, yes, it's yet another horizontal scrolling issue, they go on infinitely it seems 😏

I've got an infinite horizontal scroll set up using a ScrollTrigger loop, but I'm wondering if it's actually possible to add ScrollSmoother into the mix?
The setup I've pinched from somewhere and adapted... I can't figure out how I might be able to cater for the ScrollSmoother wrapper.

Keen to know if it's doable without too much hassle!


Thanks as ever.

See the Pen NWEovmN by matt-rudd (@matt-rudd) on CodePen

[Rodrigo]

Hi,

 

In fact that is actually happening, the scroll jumps back to the start when you get to the end. The issue is that if you add smooth: 2 in your ScrollSmoother config, it takes two seconds for the end marker to reach the end position in order to trigger the onLeave callback, which totally makes sense, otherwise the user would get jumped back to the start of the animation (scroll top zero) without seeing all the content in the horizontal stripe.

 

I'm pretty sure that with enough custom logic this could be achieved but it doesn't sound like something super simple to me. Maybe I'm overlooking something here and it could be simple, but it's just eluding me right now 🤷‍♂️

 

Hopefully this makes sense and somehow explains the situation.

Happy Tweening!

[Mattrudd]

Hi @Rodrigo, thanks for your response, appreciate your time, as ever!

 

That makes sense. The ‘smoothness’ requires time for the ease, so to speak, which messes with the imperceptible jump.

 

That’s how I felt - maybe I’m overlooking something, but I think it’s going to be tough this way because of the way the ScrollSmoother wrapper and container have to work.

 

I’d go down the alternative observer route that’s been shown elsewhere in the forum, but the problem there is my production site uses barba.js across all pages. Without going into loads of detail (and forgive me if you’re already familiar) but that involves a barba container and wrapper similar to ScrollSmoother, except the barba wrapper sits within the smoother one, and each page has to be structured in the same way for barba to work properly.

 

I’ve just realised while typing my waffle above that I could just leave the html structure the same and kill the ScrollSmoother via JS on just this horizontal scrolling page! That way I’m free to get my head around one of the observer infinite scroll approaches that provides its own smoothing, and then turn ScrollSmoother back on with a barba hook on page leave.

 

Forgive me, I’m almost typing to myself there ha! You’ve helped get the cogs going and that does seem fairly simple, at least in theory.

 

Thanks man.