Is there a way to disable Lenis on mobile/touch devices?

[stefanobartoletti]

Pretty much like the title says, I read the docs but I haven't found how to do this (sorry if by chance I have missed it)

I'd like to prevent Lenis from working on mobile devices, in my specific implementation the scrolling feels a bit uneven and "broken", looks like it is not a "special effect" but more like something that is not working properly.

[vickkie]

Hey @stefanobartoletti

you could try to use

// Function to initialize Lenis
function initializeLenis() {
 let lenis = new Lenis({
    duration: 3,
    easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
    direction: "vertical",
    gestureDirection: "vertical",
    smooth: true,
    smoothTouch: false,
    touchMultiplier: 2,
    infinite: false,
    autoResize: true,
 });

 lenis.on("scroll", (e) => {});

 function raf(time) {
    lenis.raf(time);
    requestAnimationFrame(raf);
 }

 requestAnimationFrame(raf);
}

// Function to check screen width and initialize Lenis if necessary
function checkScreenWidthAndInitialize() {
 if (window.matchMedia("(min-width: 768px)").matches) {
    initializeLenis();
 } else {
    // Screen width is less than or equal to 767 pixels
   //lenis is not started for mobile devices

 }
}

// Check screen width on initial load
checkScreenWidthAndInitialize();

// Add event listener for when user resizes
window.addEventListener('resize', checkScreenWidthAndInitialize);

[stefanobartoletti]

Thanks, that's what I tried as well.

After a bit of experimenting, I also found that setting touchMultiplier: 0, in the instance options, seems to effectively disable the effect on mobile.

It would be great if some of the authors could give some insights about what is the recommended wa7y to do this.

[vickkie]

Good to hear you solved the issue

[clementroche]

I don't understand your ask here, by default lenis only smooth wheel events, can you provide a reproduction link ?

[stefanobartoletti]

@clementroche I will try to describe it as best as I can.

Anyway, basically when scrolling on a website from an Android Phone (I cannot test on iOS at the moment, I'm sorry), there is a built-in "smooth scrolling", meaning that the screen keeps scrolling a bit when you raise your finger from the screen. This happens without using any specific library, on every site that I browse on my phone, with any browser.

When I implemented Lenis, this behavior was modified. It looked like this built-in smoothing was inhibited, because now when scrolling the screen will stop as soon as I raise my finger from the screen. So yes, technically Lenis is not smoothing on mobile, but at least in my implementation, I had to manually set touchMultiplier: 0 to prevent this.

I can also add that in this project, I needed to set a custom wrapper element because I needed Lenis to affect only a specific part of the page and not the whole window.

Let me know if this is clear enough, or if you need more info.

[clementroche]

Lenis doesn't affect the touch scroll until you use syncTouch: true 🤷‍♂️, which version are you using ? I really need a reproduction link otherwise it can be anything. In addition if Lenis would impact touch scroll touchMultiplier:0 would mean no scroll allowed

[stefanobartoletti]

Thanks, I will try to do more testing, if it is not enabled by default maybe it is something else.
I'll report back as soon as possible

[stefanobartoletti]

Ok, it looks like Lenis is not really affecting my mobile experience much, maybe the other time it was my phone being slower for other reasons .

If I will have more issues in other projects I can report again if you want, but for now I don't have much more feedback about this in the current context.

Thanks for your replies :)