Locomotive Scroll: Issues on mobile

Design help Custom code
1

Hey everyone, I was wondering if anyone has used Locomotive scroll on a Webflow project before. Everything is working fine, until I open the site from a mobile device (Android/chrome).

This is my script, which, in theory should work, but nothing happens when I try it:

const scroll = new LocomotiveScroll({
el: document.querySelector(‘[data-scroll-container]’),
smooth: true,
smartphone: { smooth: true },
tablet: { smooth: true },
lerp: 0.03, // Linear Interpolation, 0 > 1 // Try 0.01
multiplier: 1.2, // Effect Multiplier
});

Works but disables on-scroll animations made in Webflow:
I then added “smoothMobile: 1,” to the code above, and Locomotive Scroll now activates on mobile, but all Webflow interactions seem to be not working now.

Anyone encountered this? Any tips or ideas would be helpful.
Cheers!

EDIT: The interactions are actually working, but I need to press REALLY hard on the screen, and scroll rather violently in order for the device to register a scrolling trigger.

2

Hi @Mr_Finn

I am having the same issues.
Worked all day to get everything silky smooth on desktop.
But on tablet/mobile some of my elements are not even showing.

Did you find a fix for the problem?

Cheers
P

3

Hey @Appartagency , sadly nothing yet. But I did find a better script to use:

const scroll = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true,
    lerp: 0.03, // Linear Interpolation, 0 > 1 // Try 0.01
    multiplier: 1.4, // Effect Multiplier
    reloadOnContextChange: true,
    touchMultiplier: 2,
    smoothMobile: 0,
    smartphone: {
        smooth: !0,
        breakpoint: 767
    },
    tablet: {
        smooth: !1,
        breakpoint: 1024
    },
});

In “smoothmobile” and “smartphone” sections, change 0 to 1 to activate on mobile (0 means off, 1 means on), and you can even specify the breakpoint. Same for tablet.

touchMultiplier is super important to add for mobile (between 2 and 3, more than that you will be flying through the website with one flick).

With all that said, I am still unable to find a fix for mobile interactions. To activate any “on-scroll” or “while scrolling” Webflow animations, you would have to press so hard with your thumb.

What I’m doing instead is, I am creating in Webflow scroll animations for Mobile only, similar to what I would want Locomotive to do (parallax objects, side scrolling, etc…), then deactivating locomotive for mobile.

Hoping to solve this soon when I get more time.

2 Likes
4

I am facing the same problem right now. If you find a solution, I will appreciate if you update this topic :slight_smile:

My solution is full disabled locomotive on mobile and custome webflow interactions. I have issue on android/chrome (reveal/hiding native navbar cause lagging),but iphone works well. And as you see, official locomotive v4 page disabled smooth on mobile as well :confused: i am little bit confused.

1 Like
5

Very weird. For me the issue is mobile, the screen is literally stuck and cannot scroll at all. I have a project for these architects, and the home page is a long mosaic design type scroll I need to fix ASAP:
Any help is super appreciated

1 Like
6

any fix here? super curious!

1 Like
7

Yes, the thing with Locomotive was it basically highjacks your browser, and was properly loading all content from my page. I found someone that helped me use a JS library called Images Loaded, which loads all images, then forces Locomotive to re-initialize, which works perfectly in my case, and loads all images on the page, (which is many https://arc-hive.webflow.io).

If you need the JS check that resolved the issue, check out the custom code from my project here: (on the page not globally) https://preview.webflow.com/preview/arc-hive?utm_medium=preview_link&utm_source=designer&utm_content=arc-hive&preview=5a48012d3122dc905fd2613db2e423a8&workflow=preview

1 Like
8

Hey @Nick_Demore , to me, I am simply disabling locomotive on mobile, and using scroll interactions from Webflow (applied to mobile and tablet only) to simulate something close to the effects I have with locomotive.

Now while there seems to be a solution, or at least something close to one, is that you could use “touchMultiplier: 2,” but to be honest I did not have the time to play around the values of that multiplier to see which one works (if it worked at all, in the sense that it fixes all the issues).

I will try to play around with this more once I finish up my current projects and have more time to experiment. But for now, I am simply disabling it on mobile.

1 Like
9

Thanks for that! This should come in pretty handy

10

What part of the code makes all the images load?

the beginning:

or

end:

$(‘body’).imagesLoaded().always( function( instance ) {
locoScroll.update();

11

I tried everything and it didn’t really work for me. Except this:

setTimeout(() => {  
    locoScroll.destroy();
}, 0);
setTimeout(() => {  
    locoScroll.init();
}, 50);
setTimeout(() => {  
    locoScroll.update();
}, 1000);

I reinitialized locomotive and then updated to make sure. It works perfectly for me in all mobile browsers but the app Duckduckgo (that’s fine for me)

12

Great! Do I just toss this in at the bottom of the already existing code? You’re a legend for this

13

Thanks this worked!!!