Smooth Scrolling Using Locomotive Scroll in 3 simple steps

4 min readMar 30, 2024

In this blog we will be learning about how we can make our page scroll smooth as butter by harnessing the power of Locomotive Scroll.

What is Smooth Scrolling?

The Name Smooth Scrolling defines it all, that is scrolling the page in a very smooth manner like a fluid without any harsh movement or a sudden stop.
In traditional scrolling, we go from one section to another quickly without any animation or smoothness. So smooth scrolling solves it all by adding smoothness to the scroll effect.
Smooth scrolling adds animation to the scrolling of the page and thus makes the scrolling effect more premium.
This means that instead of the content jumping from one position to another abruptly when scrolling, it transitions smoothly, often with animations or easing effects.
We can achieve smooth scrolling using JS as well as CSS. But in this blog we will use the Locomotive Scroll as it provides many cool features.

Why we Should Use Smooth Scrolling?

In today’s tech world, the most important factor that a website developer should take into consideration is the user experience. The User Experience could make a website rank top or vice versa.

The Benefits of Smooth Scrolling are -

Enhanced User Experience
Reduced Eye Strain
Improved Accessibility
Professional Appearance
Easier Navigation

What is Locomotive Scroll?

Locomotive Scroll is a JavaScript library that facilitates smooth scrolling effects on web pages. The Locomotive Scroll is also known as Locomotive JS.

Locomotive Scroll is designed to create a natural, fluid scrolling type of experience by providing features such as scroll animations, parallax effects, and customizable easing functions.

The Key features and functionalities provided by the locomotive Scroll are as follow.

Smooth Scroll — Locomotive Scroll enables smooth scrolling behavior, which eliminates the abrupt jumps typically associated with traditional scrolling.
Scroll Animations — The library allows you to animate elements based on scroll events. This can be used to create engaging and interactive effects as users navigate through the page.
Parallax Effects — Locomotive Scroll supports parallax scrolling, where background elements move at a different speed than foreground elements, creating a sense of depth and immersion.
Lightweight and Performant — The library is designed to be lightweight and efficient, ensuring smooth performance even on complex web pages with multiple scrolling elements and animations.
Compatibility — Locomotive Scroll is compatible with modern web browsers and supports responsive design, making it suitable for a wide range of projects and devices.

How to use Locomotive Scroll to achieve smooth scrolling on our page ?

We can use locomotive scroll using cdn and npm. In this blog we will be using cdn.

First Step

We will get the cdn of the Locomotive Scroll. We can get the cdn by directly searching for it on Google, or you can directly copy the code from below and paste it inside the head tag in HTML.

<!-- This is to install the locomtive js -->
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.4/dist/locomotive-scroll.min.js"></script>

<!-- This code is to install the locomtive css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.4/dist/locomotive-scroll.min.css">

Second Step

We will write a basic HTML code. In which there will be a main container on which we want to apply the smooth scrolling. Inside this container we will have multiple div tags of screen height and width.

We will also create a script.js file and then link it to our HTML code. And remember you should place this script.js link code in the end of the body tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- This is to install the locomtive js -->
    <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.4/dist/locomotive-scroll.min.js"></script>

    <!-- This code is to install the locomtive css -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.4/dist/locomotive-scroll.min.css">
    <title>Locomotive Scroll</title>
</head>
<body>
<div class="scroll-container">
    <div class="Content first">
        <h1>Hey</h1>
        <p>👋</p>
    </div>
    <div class="Content second">
        <h2>What's up?</h2>
        <p>😬</p>
    </div>
    <div class="Content third">
        <h1>Good</h1>
        <p>👋</p>
    </div>
    <div class="Content four">
        <h2>And you!</h2>
        <p>😬</p>
    </div>
</div>
<script src="script.js"></script>
</body>

.Content{
height:100vh;
width:100vw;
display:flex;
justify-content:center;
align-items:center;
}

.first{
background-color:red;
}
.second{
background-color:orange;
}
.third{
background-color:green;
}
.four{
background-color:blue;
}

Third Step

Now lets add our Locomotive Scroll js code in our script.js file.

const scroll = new LocomotiveScroll({
    el: document.querySelector('.scroll-container'),
    smooth: true
});

In the above code, we are creating an object of Locomotive Scroll and passing data to it. Inside the data we are specifying the element i.e el on which we want to apply the Locomotive scroll along with that we are also specifying that we want the scroll to be smooth by setting the value of smooth as true.

And that’s it, you have got yourself smooth scrolling.

Locomotive Scroll Example

Party! Party! Party! 🎉🎊🎉🎊

Now, learners, this is just the basics. You can achieve a lot more using Locomotive scroll. If you want to learn more cool and useful things, do follow me.