Infinite scroll design pattern idea/question

[andrew-ireland]

Hi 👋, first of all, just wanted to say how impressed I am with Lenis generally — very keen to use it in some upcoming projects!

Hopefully a quick/easy question for you re: infinite looping (how I stumbled across lenis).

Long story short, I'm looking to pull off the following somewhat experimental pattern where I have an intro/landing section, and then an infinitely looping section after (but only when scrolling in a downwards direction). See the attached image for reference.

I've already built a demo of this concept using native scrolling which works beautifully in safari, but chrome browsers don't seem to handle the looping part as elegantly... which is what led me to look closely at VirtualScroll implementation for consistency.

My question to you; are there any existing methods within Lenis which could contain the infinite loop to a specific target? Alternatively, any pointers in the right direction if I were to achieve this by forking lenis would be amazing (though I don't expect it!)

[clementroche]

Thank you for your message, unfortunatelly such feature doesn't exist yet. That's in fact very specific. We're planning to open lenis for plugins in some ways, we don't know how. So this kind of feature could be a plugin.

[andrew-ireland]

Not surprised to hear that, but nice idea on the plug-in architecture (really like the lack of bloat in lenis by default). If there is a way to allow for a specific loop target within that future development plugin dev that would be cool, but I understand it's probably fairly niche.

Looks like I'll need to fork and attempt some reverse engineering of your infinite looping method when I have time. Thanks for your reply 🫡

[arzafran]

hey @andrew-ireland, i’ve implemented something similar by creating a contained lenis component in our website, check it out here and how it’s used could be a shortcut for what you’re trying to do.

[clementroche]

i leave it open for potential plugin