[SOLVED] LocoMotive Scroll isn't working on mobile view

[whizzbbig]

Hello 👋

Describe the bug Features aren't working on mobile. :'(

To Reproduce Steps to reproduce the behavior:

1. Go to 'fix-me'
2. Open it in Mobile
3. Scroll down to
4. See error

Expected behavior The features I've used aren't working like data-scroll data-scroll-direction data-scroll-speed. the strange things is that everything is stopped.

Screenshots

https://user-images.githubusercontent.com/54703305/128642272-09c6e4f9-b8cd-444f-88fa-49919bdf8f26.mp4

have to work like this

https://user-images.githubusercontent.com/54703305/128642377-426c7925-3787-4925-a887-70c6992cca56.mov

Desktop (please complete the following information):

• OS: MacOs Big sur
• Browser: chrome
• Version: latest

Smartphone (please complete the following information):

• Device: Realme C3
• OS: Android
• Browser: Chrome
• Version: Latest

Thank you 👊

[white-hat-vaibhs]

Did you tried :

const locoScroll = new LocomotiveScroll({
    el: document.querySelector(".smooth-scroll"),
    smooth: true,
    mobile: {
       smooth: true
   },
   tablet: {
       smooth: true
   }
  });

[whizzbbig]

Did you tried :

const locoScroll = new LocomotiveScroll({
    el: document.querySelector(".smooth-scroll"),
    smooth: true,
    mobile: {
       smooth: true
   },
   tablet: {
       smooth: true
   }
  });

still not working

  const scroller = new LocomotiveScroll({
    el: pageContainer,
    inertia: 0.8,
    smooth: true,
    getDirection: true,
    mobile: {
      smooth: true,
      inertia: 0.8,
      getDirection: true,
    },
    tablet: {
      smooth: true,
      inertia: 0.8,
      getDirection: true,
    },
  });

[whizzbbig]

I also looked on to locomotive scroll website on mobile and the features also aren't working there and same with the examples using locomotive scroll give in codrops.

[whizzbbig]

Did you tried :

const locoScroll = new LocomotiveScroll({
    el: document.querySelector(".smooth-scroll"),
    smooth: true,
    mobile: {
       smooth: true
   },
   tablet: {
       smooth: true
   }
  });

here have a look i tried to open sites use locomotive scroll and compare them to desktop version

Theres a codrops example using library locomotive scroll

https://user-images.githubusercontent.com/54703305/128784558-70566a15-0398-4c54-a4dd-d1fec7e86e93.mp4

Locomotive scroll website

https://user-images.githubusercontent.com/54703305/128784539-9f8a5302-fde7-4004-b609-6e360c8bec87.mp4

desktop version

https://user-images.githubusercontent.com/54703305/128784586-dcfb9ae4-f3b3-49c4-a858-5c63c24d4484.mov

https://user-images.githubusercontent.com/54703305/128784862-47115afe-6f6a-4e57-9178-15a65c626d51.mov

[ashehzadgec]

@whizzbbig

I would suggest you to share a minimal demo like on codepen. That will help us see what's wrong with your code. Nobody will be able to help you just by seeing the video.

Note: I would strongly suggest you do not use smooth scroll on touch devices as the performances will be very poor especially for low and mid devices.

[whizzbbig]

@whizzbbig

I would suggest you to share a minimal demo like on codepen. That will help us see what's wrong with your code. Nobody will be able to help you just by seeing the video.

Note: I would strongly suggest you do not use smooth scroll on touch devices as the performances will be very poor especially for low and mid devices.

Hi as i've tested that on devices that the features of the locomotive scroll seem to work if you try to open in devtools.it not gonna work in mobile cases

here do few steps open this link in https://fix-me.netlify.app/ in mobile and also in desktop

*Now what you have to do in desktop is open responsive and set to iphone x or smthn or just squeeze the size of the chrome to its limits there you'll see the locomotive scroll feature on the header and also the textmarquee that are overflowing

*Now for mobile you just need to open it in any mobile that link and most probably you'll gonna see them not working

same with the locomotivescroll site it not gonna work

[hamedbaatour]

Here is a quick fix... Simply set the breakpoint option to 0 in the tablet object

const locoScroll = new LocomotiveScroll({
  el: document.querySelector("[data-scroll-container]"),
  smooth: true,
  tablet: {
    breakpoint: 0,    // <---- Fixes The Issue 🎉
  }
})

Hope this was helpful 😉

[whizzbbig]

Here is a quick fix... Simply set the breakpoint option to 0 in the tablet object

const locoScroll = new LocomotiveScroll({
  el: document.querySelector("[data-scroll-container]"),
  smooth: true,
  tablet: {
    breakpoint: 0,    // <---- Fixes The Issue 🎉
  }
})

Hope this was helpful 😉

not work ; ;

[whizzbbig]

[hamedbaatour]

Are you sure you are using the latest version of locomotivescroll ?

Seems to be working on my end...🤔 Maybe try it in a clean browser session without any extensions

[ashehzadgec]

@whizzbbig

I suggested you to provide a minimal demo but you throw the whole page. anyhow I dig into your code a bit and found that you are using the old version of locomotive but using the new syntax of the latest version. Kindly update the locomotive to the latest version, keep the same syntax and I think you don't need to provide breakpoints. It should work fine now on all devices.

[whizzbbig]

@whizzbbig

I suggested you to provide a minimal demo but you throw the whole page. anyhow I dig into your code a bit and found that you are using the old version of locomotive but using the new syntax of the latest version. Kindly update the locomotive to the latest version, keep the same syntax and I think you don't need to provide breakpoints. It should work fine now on all devices.

have added the locomotive-scroll.min.js fille finger crossed hope it get work however it is working in desktop tho thanks for helping me bro

[whizzbbig]

@whizzbbig

I suggested you to provide a minimal demo but you throw the whole page. anyhow I dig into your code a bit and found that you are using the old version of locomotive but using the new syntax of the latest version. Kindly update the locomotive to the latest version, keep the same syntax and I think you don't need to provide breakpoints. It should work fine now on all devices.

working thanks bro thankyou you helped me alot

[whizzbbig]

thankyou @hamedbaatour @white-hat-vaibhs @ashehzadgec for helping me to solve this problem. now I'll able to continue on the project which was on hold for 1 week. :)

[whizzbbig]

@whizzbbig

I would suggest you to share a minimal demo like on codepen. That will help us see what's wrong with your code. Nobody will be able to help you just by seeing the video.

Note: I would strongly suggest you do not use smooth scroll on touch devices as the performances will be very poor especially for low and mid devices.

so ok i not want to make it smooth but the elements which i have assigned to move horizontal like heading spans and all will work if i remove the smooth: true form the tablet {} and mobiel {}

[whizzbbig]

@ashehzadgec did something like this

  const scroller = new LocomotiveScroll({
    el: pageContainer,
    inertia: 0.8,
    smooth: true,
    getDirection: true,
    mobile: {
      breakpoint: 0,
      smooth: false,
      getDirection: true,
    },
    tablet: {
      breakpoint: 0,
      smooth: false,
      getDirection: true,
    },
  });

its good that it disables the smooth scroll but it is also disabling the effect on heading and caption where i defined the data-direction and data-scroll properties

[ashehzadgec]

yes, that's right and expected because now smooth scroll is disabled and all related effects are gone. you can use gsap or some other libraries you like or are comfortable with for the same effect.

[MrJ-2k04]

Try this one, it will definitely work! 😄

const locoScroll = new LocomotiveScroll({
    el: document.querySelector(".smooth-scroll"),
    smooth: true,
    smoothMobile: true
  });

[yann0851]

Pour nous ça ne fonctionne toujours pas bien, on a essayer plusieurs méthodes trouver sur github mais impossible. A la base on travaillait tranquillement dessus sans aucun problème, on utilisait l'outil de dev de google pour avoir un aperçue mobile, mais lorsque l'on c'est connecter en localhost sur nos portable, on c'est aperçue que rien ne fonctionne.

[Peruchino]

Try this one, it will definitely work! 😄

const locoScroll = new LocomotiveScroll({
    el: document.querySelector(".smooth-scroll"),
    smooth: true,
    smoothMobile: true
  });

This works! you'r a GENIUS

[nagarajpandith]

using the below option fixed it for me

smartphone: {
    smooth: true,
}

Note I am using locomotive-scroll v4.1.4, depending on your version it will be mobile instead of smartphone or just smoothMobile: true

[htodep]

I know this issue is closed. But I really want the smooth option disabled for mobile but keep the animations. Don't want to ditch the plugin!

[devmeraz87]

const locoScroll = new LocomotiveScroll({
    el: document.querySelector(".smooth-scroll"),
    smooth: true,
    smoothMobile: true
  });

this works on locomotive scroll version 3.5.4

[adityamandal-Developer]

".smooth-scroll"

"locomotive-scroll": "^5.0.0-beta.13", am using this version is not working

  useEffect(() => {
    let scroll;
    import("locomotive-scroll").then((locomotiveModule) => {
      scroll = new locomotiveModule.default({
        el: document.querySelector(".smooth-scroll"),
        smooth: true,
        smoothMobile: true,
        resetNativeScroll: true
      });
    });

    return () => {
      if (scroll) scroll.destroy();
    }
  }, []);

[adityamandal-Developer]

"locomotive-scroll": "^5.0.0-beta.13", am using this version is not working

  useEffect(() => {
    let scroll;
    import("locomotive-scroll").then((locomotiveModule) => {
      scroll = new locomotiveModule.default({
        el: document.querySelector(".smooth-scroll"),
        smooth: true,
        smoothMobile: true,
        resetNativeScroll: true
      });
    });

    return () => {
      if (scroll) scroll.destroy();
    }
  }, []);

[aaryaxz]

Thnx! a lot bro it is really working @Peruchino

[An1mus]

"locomotive-scroll": "^5.0.0-beta.13", am using this version is not working

  useEffect(() => {
    let scroll;
    import("locomotive-scroll").then((locomotiveModule) => {
      scroll = new locomotiveModule.default({
        el: document.querySelector(".smooth-scroll"),
        smooth: true,
        smoothMobile: true,
        resetNativeScroll: true
      });
    });

    return () => {
      if (scroll) scroll.destroy();
    }
  }, []);

Same thing for me:

    (async () => {
      if (page) {
        const Locomotive = (await import("locomotive-scroll")).default;
        locomotiveScroll.current = new Locomotive({
          lenisOptions: {
            wrapper: window,
            content: document.documentElement,
            lerp: 0.1,
            duration: 1.2,
            orientation: 'vertical',
            gestureOrientation: 'vertical',
            smooth: true,
            smoothWheel: true,
            smoothTouch: true,
            smoothMobile: true,
            resetNativeScroll: true,
            wheelMultiplier: 1,
            touchMultiplier: 2,
            easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
          }
        });
      }
    })()

[HangLimbu995]

Here is a quick fix... Simply set the breakpoint option to 0 in the tablet object

const locoScroll = new LocomotiveScroll({
  el: document.querySelector("[data-scroll-container]"),
  smooth: true,
  tablet: {
    breakpoint: 0,    // <---- Fixes The Issue 🎉
  }
})

Hope this was helpful 😉

yes it was helpful. It worked perfectly. & Thank You.

[Reseraura]

i have a similar problem becuase it works fine on both desktop and mobile, but on mobile the vertical scroll is slower and a weird. Anyone had the same problem?

[jjjuho]

anyone got some idea how to get 5.0.0 parallax effect working with mobile?

[intermediate-developer-raj-0]

Same I have also same problem here that link. That i have shere to free host netlify of my web page

Link :- https://weblastproject.netlify.app/

Please help guys

[oluwaseun-demonflowne]

is there a fix for it to work on mobile on v5?