Locomotive Smooth Scroll Setup

Documentation

For all instance settings please read the Locomotive Scroll v5 Documentation.

Attributes

We highlighted some of the available attributes. Please read the documentation for all options.

• data-scroll Enable viewport detection on an element.
• data-scroll-speed Example: 0.1 or -0.05
• data-scroll-offset Example: 25%, 50%

<h2 data-scroll data-scroll-speed="-0.5" data-scroll-offset="50%, 50%">What's up?</h2>
<p data-scroll data-scroll-speed="0.1">😬</p>

Options

Locomotive Scroll can use a lot of the options defined by Lenis, for a full list check out the documentation.

// Initialize Locomotive Scroll
const locomotiveScroll = new LocomotiveScroll({
  lenisOptions: {
    // Options (https://scroll.locomotive.ca/docs/documentation/options)
    lerp: 0.1,
    duration: 1.2,
    easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
  }
});

Start Scroll

Call locomotiveScroll.start(); to enable scroll again.

// Don't start Locomotive on load
const locomotiveScroll = new LocomotiveScroll({
  autoStart: false,
});

// Manually start it
function startScroll() {
  locomotiveScroll.start();
}

Stop/Pause Scroll

Call locomotiveScroll.stop(); to disable the scroll for the user, for example when opening a modal.

Destroy Scroll

Call locomotiveScroll.destroy(); to destroy the scroll.

Nested Scroll

For modals or other elements that have overflow: scroll; add the data-attribute [data-lenis-prevent]

Lenis Resources

To have a more basic setup with just Lenis check out our Lenis Smooth Scroll Resource.