This article will show you how to add Locomotive Scroll to a website. For this example, we will be using WordPress and Oxygen Builder, but the concepts discussed here can easily be applied to any framework or CMS.

What is Locomotive Scroll? From the Github, it's "a simple scroll library used by developers at Locomotive. Built as a layer on top of ayamflow's virtual-scroll, it provides smooth scrolling with support for parallax effects, toggling classes, and triggering event listeners when elements are in the viewport.". Once installed, this library makes your site incredibly unique. In our opinion, it's the best parallax library in the game, with a ton of options. You can also leverage the class toggles and event listeners to create incredibly immersive, interactive experiences.

Essentially, it's something that you should at least be experimenting with.

Step 1: Install JS and CSS Libraries

First thing to do is install the JS and CSS associated with Locomotive Scroll. For development, we copy the most recent version of the code, create a new Advanced Script, and add both to our website's header and footer (on WP it would be wp_head and wp_footer).

We can also embed our <script> and <link> components by using Statically, generating a CDN version from the raw Github, and placing the component in our header and footer by using AS.

That div, which is now a "<main>", then has the "data-scroll-container" attribute added to it.

Step 3: Initialize The Locomotive Scroll Library

Now the site is ready for the scripts, css, and new element with the attribute to all work together, and create a unique smooth scroll effect. All we need to do is initialize the library. You can do this globally (as we've done in the script above), only include this code on specific pages, or anything in between. If using Oxygen Builder, you can use a code block to do this, or add the JS to the JS section of any element. If using WordPress, you can use Advanced Scripts. With it, you can globally toggle this, or set conditions to only initialize LS on specific pages or ranges of pages.

const scroll = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true
});Code language: JavaScript (javascript)

You can see that there is a place to add additional options (after smooth: true).

Now, if you go to the frontend of your website, there should be a new scrollbar (like a mobile iOS one), and a smooth scrolling effect. If this doesn't show, check your browser console to troubleshoot.

Step 4 (Optional) - Improve Scrolling Performance

For each section on the page, add the "data-scroll-section". While optional, this really helps with scrolling performance (reduces choppiness).

Conclusion

You should now have a really unique smooth scrolling effect. From here, you can apply parallax, and do unique things like on letter scroll animations.

If you found this helpful, please share! Feel free to ask any questions down in the comments section below.