Scroll Smoother + Scroll Trigger + Infinite Scroll

[dolph]

Hey guys!

I have a project I'm building which integrates Barba.js, Scroll Smoother and Scroll Trigger. I require the website to scroll infinitely, which is something I've built previously using this example:  

This works well however It seems when enabling Scroll Smoother problems emerge and it's fairly buggy. Looks like the pageScrollTrigger.scroll(1); is no longer instant (you can visibily see the scroll back to top) and it seems to trigger the scroll back to top earlier than it should.

I understand https://lenis.studiofreight.com/ has an infinite option built in, but I want to stick with the GSAP solution. It's probable I need to rethink the implementation in a way that is compatible with ScrollSmoother.js - any help will be appreciated!

See the Pen KKxJbwg?editors=1111 by dolph4321 (@dolph4321) on CodePen

[GreenSock]

Hi @dolph! Thanks for being a Club GreenSock member. 💚

 

Yeah, that's a very tricky challenge because when you "smooth" the scroll, it fundamentally unhooks it from the native scrollbar which is the one you want to "loop". That's relatively easy to do, of course, but the smoothing just knows that it must smooth the "catch up" to that new (native) scroll position. So if the native scroll position is at 1000px (let's say that's the bottom) and then you suddenly change it to be at 1px (to loop it), ScrollSmoother says "okay, I better smooth that out going all the way backwards from 1000px to 1px" but the behavior you're asking for is to make the smoothing continue to INCREASE after you moved the native one all the way back to 1. There isn't really a way to have ScrollSmoother do that. This is quite an edge case.

 

Doing that looping is pretty straightforward if you're affecting native scroll which is what Lenis does. It's a tradeoff because Lenis doesn't smooth out a bunch of other ways the user can scroll (space bar, arrow keys, dragging the scrollbar, etc.) like ScrollSmoother does, but there are valid benefits to doing it the way Lenis does too. I hear nice things about Lenis, so I don't think you should be worried about using it if it solves this particular challenge for you. I've never used Lenis, but I know it works great with ScrollTrigger and the Studio Freight folks are big fans of GSAP so it should all work pretty well together. 👍

[dolph]

Thanks guys,

Understood - I'll take a look at Lenis, should do the trick!