Has anyone successfully implemented Locomotive scroll on a Webflow project and encountered issues with its compatibility on mobile devices?

Yes, many users have implemented Locomotive Scroll in Webflow projects, but it often presents compatibility issues on mobile devices. Below is what you need to know when integrating Locomotive Scroll with Webflow, especially for mobile support.

1. Common Mobile Compatibility Issues

• Unexpected white space or layout shifts due to transforms and pseudo-fixed positioning by Locomotive Scroll.
• Scroll not working at all on mobile devices if the scroll container is misconfigured or overlaps.
• Performance issues such as jittery scroll or slow response, especially on low-end devices.
• Touch interaction problems when using smooth scrolling mode on touch devices.

2. Use Webflow’s Native Scroll First

• Webflow is not designed to work with third-party scroll engines like Locomotive Scroll by default. Before using Locomotive, test if the Webflow native interactions and scroll-based animations can meet your needs.
• Adding Locomotive Scroll may interfere with Webflow’s IX2 engine (scroll-triggered animations won't fire unless correctly reinitialized).

3. Key Steps if You Choose to Use Locomotive Scroll

• Wrap your entire page inside a div, typically called #smooth-scroll, and set that as the scroll container.
• Initialize Locomotive after Webflow has finished loading, preferably inside the Webflow.push() function.
• Prevent Webflow’s default animations from breaking by manually triggering refresh calls to webflow interactions when Locomotive Scroll fires scroll events.
• Check for mobile touch support or disable Locomotive Scroll on mobile by running a media query script to load the library only for screen widths above 768px, for example.

4. Alternative Fixes or Considerations

• Disable Locomotive Scroll on mobile: Many developers choose to disable it entirely on mobile and fall back to native scroll for better performance and consistency.
• Use scroll event proxying and native fallback: Programmatically detect if Locomotive is active and allow for graceful degradation.
• Ensure correct viewport units: Locomotive uses transforms that may behave unpredictably when combined with vh, vw, or 100% height units.

Summary

Yes, Locomotive Scroll is used in Webflow projects, but you must handle mobile compatibility carefully. Common issues include broken scroll behavior, layout shifts, and performance lags. Many developers disable it on mobile or use workarounds for smooth compatibility. Always test across devices before deploying.