Skip to main content

📜 Introducing Locomotive Scroll

Locomotive-scroll is a smooth-scrolling library we built at Locomotive over the years. It instantly adds a "fancy" feel to our websites with that butter-smooth scrolling feel, but it also gives us a lot of opportunities & tools to go crazy on animations!

Locomotive Scroll

Smooth-scrolling history​

Back in the days, smooth-scrolling wasn't possible without "Scroll hijacking". Hijacking the scroll means taking control of the browser’s native scroll to modify its behaviour, speed, direction, easing, delay, and stopping and starting the scroll, for example. Clearly, it’s a powerful tool for expanding creative possibilities and personalizing a navigation experience. But it came with a lot of pitfalls: it can shock or perturb user habits, be performance-greedy, and create accessibility concerns.

Nowadays, it's less of an issue a11y-wise thanks to Lenis which makes the browser's native scroll smooth instead of hijacking it. It resolves all the a11y issues encountered before and is way more performant! Locomotive-scroll uses Lenis starting with the v5 which is currently in beta, we'll use that today!

Lenis scroll

caution

Even with Lenis, smooth-scrolling can shock or perturb user habits: it's not suited for every type of website.

For example, for an e-commerce site, we generally want to prioritize conversion, performance, and native browser experience and therefore not use smooth-scrolling. A more experiential site on the other hand, such as an agency portfolio, could prioritize the “wow factor” and innovatively showcase the brand image through more advanced animations.

A toolbox with many features​

You may wonder: if there's Lenis, what's the point of using Locomotive-scroll?
Well, as one of Lenis founders' said, think of it this way:

lenis is the engine, locomotive is the car around it.
and since v5 in locomotive you would be using lenis under the hood.https://t.co/8tGpKTMxe8

— arzafran (@arzafran) August 24, 2023

LS brings a lot of useful features such as inview detection, parallax, element viewport progress, etc. We'll use the latter a lot today! Click on our mascot to get to the doc:

Go to the documentation

Add LS to our project​

There's no need to call npm i --save locomotive-scroll@beta in our project as it's already installed! However, we need to call the Scroll module:

views/layouts/base.twig
<div data-module-scroll="main">
    <header>
        <h1>Hello Labin!</h1>
    </header>

    <main>
        {% block content %}{% endblock %}
    </main>
</div>

In order to make sure it's working, we can add dummy divs to trigger vertical scrollbars:

{% for i in (0..10) %}
    <div style="display: block; height: 50vh; background: rgba(255,255,255,0.1);"></div>
    <div style="display: block; height: 50vh; background: rgba(255,255,255,0.0);"></div>
{% endfor %}