Amazing scroll effect on your website with Locomotive Scroll

As a programmer, I am always on the lookout for new and exciting ways to improve my websites. Recently, I stumbled upon a smooth-scroll effect that blew me away, and I knew I had to share it with fellow developers. That’s why I am writing this article to introduce you to Locomotive Scroll, a powerful npm package that can add an amazing scroll effect to your website. Whether you are a seasoned developer or just starting out, I highly recommend giving Locomotive Scroll a try. So, let’s dive in and see how you can use it to enhance your web projects! And if you’d like to know more about me, feel free to visit my website at https://tammura.com.

Photo by Andy Hermawan on Unsplash

I’m actually using NextJs that is a ReactJs based framework, but you can implement the smooth-scroll effect with any stacks you are using. So now let’s get started with the tutorial.

The npm package we are talking about is Locomotive Scroll and you can install it by the following command:

npm install locomotive-scroll 

After you have to create a css file like locomotive-scroll.css and paste the following code:

/*! locomotive-scroll v4.1.3 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */
html.has-scroll-smooth {
  overflow: hidden;
}

html.has-scroll-dragging {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.has-scroll-smooth body {
  overflow: hidden;
}

.has-scroll-smooth [data-scroll-container] {
  min-height: 100vh;
}

[data-scroll-direction="horizontal"] [data-scroll-container] {
  height: 100vh;
  display: inline-block;
  white-space: nowrap;
}

[data-scroll-direction="horizontal"] [data-scroll-section] {
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  height: 100%;
}

.c-scrollbar {
  position: absolute;
  right: 0;
  top: 0;
  width: 11px;
  height: 100%;
  transform-origin: center right;
  transition: transform 0.3s, opacity 0.3s;
  opacity: 0;
}
.c-scrollbar:hover {
  transform: scaleX(1.45);
}
.c-scrollbar:hover,
.has-scroll-scrolling .c-scrollbar,
.has-scroll-dragging .c-scrollbar {
  opacity: 1;
}
[data-scroll-direction="horizontal"] .c-scrollbar {
  width: 100%;
  height: 10px;
  top: auto;
  bottom: 0;
  transform: scaleY(1);
}
[data-scroll-direction="horizontal"] .c-scrollbar:hover {
  transform: scaleY(1.3);
}

.c-scrollbar_thumb {
  position: absolute;
  top: 0;
  right: 0;
  background-color: black;
  opacity: 0.5;
  width: 7px;
  border-radius: 10px;
  margin: 2px;
  cursor: -webkit-grab;
  cursor: grab;
}
.has-scroll-dragging .c-scrollbar_thumb {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
[data-scroll-direction="horizontal"] .c-scrollbar_thumb {
  right: auto;
  bottom: 0;
}

After you have to import this file inside _app.tsx

import "../styles/locomotive-scroll.css";

Okey, now you have imported all you need, let’s start with the configuration. According to the official documentation you have to initialize it in your base layout script by the following code:

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll();

But, in my case using a server-side framework i had it in this alternative way:

/* USE THIS CODE ONLY IF YOU ARE USING A SERVER-SIDE RENDERING FRAMEWORK */
useEffect(() => {
  import("locomotive-scroll").then((locomotiveModule) => {
    const scroll = new locomotiveModule.default({
      el: document.querySelector("[data-scroll-container]"),
      smooth: true,
    });
  });
});

Now we almost done, we have to create a parent div that will act as a scroll-container div, after we will create a scroll-sections for optimizing our website:

<div data-scroll-container>
    <div data-scroll-section>
        <h1 data-scroll>Hey</h1>
        <p data-scroll>👋</p>
    </div>
    <div data-scroll-section>
        <h2 data-scroll data-scroll-speed="1">What's up?</h2>
        <p data-scroll data-scroll-speed="2">😬</p>
    </div>
</div>

As you see, you can also control item’s scroll speed, so you can imagine how you can create a very cool effects.

I hope this article was helpful for you all. Good bye 👋