Implementing Smooth Scroll with Locomotive

Locomotive Scroll transforms standard scrolling into a smooth, cinematic experience.Here's how to set it up.

Installation

Install via npm:

npm install locomotive-scroll

Basic Setup

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,
  multiplier: 1,
  lerp: 0.1
});

HTML Structure

<main data-scroll-container>
  <section data-scroll-section>
    <h1 data-scroll data-scroll-speed="2">Fast Element</h1>
    <p data-scroll data-scroll-speed="0.5">Slow Element</p>
  </section>
</main>

Key Options

Speed

Different speeds create parallax effects:

• Values > 1: Faster than scroll
• Values < 1: Slower than scroll
• Negative values: Opposite direction

Direction

<div data-scroll data-scroll-direction="horizontal">
  Moves horizontally while scrolling vertically
</div>

Integration with React

useEffect(() => {
  const scroll = new LocomotiveScroll({
    el: containerRef.current,
    smooth: true
  });
  
  return () => scroll.destroy();
}, []);

Common Gotchas

• Update scroll after content changes
• Handle resize events
• Consider reduced motion preferences
• Mobile might need native scroll

Conclusion

Locomotive Scroll elevates the browsing experience. Use it on portfolio sites and storytelling pages where smooth scrolling enhances the narrative.