Infinite scrolling with a seamless loop to the start

[tinokaartovuori]

Hello!

I am currently working on creating a website similar to Jantana Hennard's Portfolio and I am interested in replicating the infinite scrolling feature. From my research, it appears that the developer is using smooth-scrollbar on the website. I have also noticed that the translate3d property is applied separately to each child container rather than the entire scroll container.

I am wondering if there is a specific plugin or implementation that can be used for this type of feature. Can you provide some guidance on how I can approach the implementation of this feature on my website?

Thank you!

[sadeghbarati]

Wow, I never get tired of scrolling 💯

Sorry, I'm not that Pro to help you, but from what I saw

• Uses smooth-scrollbar per page, not in the layout (app-wide)
• Lock smooth-scrollbar x, y scrolling and only get delta on wheel and touch events, simple demo
• Uses gsap ticker and calculates mathematic stuffs? xd

[tinokaartovuori]

Thank you for the valuable information!

"Uses smooth-scrollbar per page, not in the layout (app-wide)"

Yea, this is something that I noticed too! This is smart since if you can change the behaviour between pages. In fact in the portfolio I provided, this infinite scroll is only used for the home page. 👍

"Lock smooth-scrollbar x, y scrolling and only get delta on wheel and touch events, simple demo"

This is actually awesome. I tried to do this in a different way for hours and did not succeed XD. Luckily you had the solution for this. I am also wondering that is there an easy way to find other plugins for smooth-scrollbar? I only found the overscroll one pretty much. I tried this solution you provided and it works like a charm! 🔥

"Uses gsap ticker and calculates mathematic stuffs? xd"

This one actually sounds a little scary since I am not familiar with gsap ticker at all but since now I have the delta on wheel and touch I can maybe figure something out. How did you notice that gsap ticker is used here?

Thank you for your help. 👍 This was actually very useful information (even if you claim not to be Pro)

[sadeghbarati]

How did you notice that gsap ticker is used here?

Developer Tools > Sources/Debugger/Network

I wished he turned sourcemap on, so we simply understood what's going on 😄 instead of diggin' into compiled codes 🤯

Looks like you using Nuxt for this project, we worked on a simple Vue wrapper It would be good if you test it out Thanks ❤️

[tinokaartovuori]

I might give the Vue wrapper a try! :) Tried to use the gsap ticker and it wasn't scary at all!
I have still plenty of stuff to figure out bit this is a nice start!

Thank you! 🔥

[sadeghbarati]

I'm glad I could help you a little

Good Luck!