Getting Started with Locomotive Scroll: A Beginner’s Guide

4 min readMay 15, 2024

Do you love seeing those websites which Become Site of Day, Site of Month or Even Site of Year in Awwwards.com. Well I Found them Very interesting and always have a desire to know how they can create websites like that. They Are smooth They got Good Animation also. A real Piece of Art

I Always wanted to know How they made it. Now I Realized they use animation libraries like GSAP,Threejs and also Locomotive. I know many of u say they are not fast and slow which is bad for UX. And as an UX Designer I also know about it. But I think locomotive js is best fit if you want to use a small library and also got Good results. It provides Smooth Scroll And many effects related to speed. If any of you don’t know about smooth scroll then go to there website.

What we are going to do?

We are going to know about basics of locomotive.js. How to Get started, Basic Feature like data-scroll. What to do in Javascript File How to get there cdn. And Other Cool Stuff And Maybe In Next Blog we are going to talk about. How to create a basic project in Locomotive.js.

I will consider that a basic understanding of HTML,CSS and Javascript is needed.

So Open your Code editor create a folder and create three files for Html,CSS And js.

Write a boiler Plate Code for HTML.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Locomotivejs</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <script src="script.js"></script>
</body>
</html>

Write a boiler Plate Code for CSS.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,body{
    height: 100%;
    min-height: 100vh;
    width: 100%;
    background-color: red;
}

Now Time to add cdn for Both Css and JS of Locomotive. This is whole code after adding cdn for CSS and JS.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Locomotivejs</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css">
</head>
<body>
    <script src="script.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.js"></script>
</body>
</html>

Add a div tag in body with class main and 3 other div with id page-1,page-2,page-3

Add the following code in body tag

  <div id="main">
      <div id="page1"></div>
      <div id="page2"></div>
      <div id="page3"></div>
    </div>

Add following code in CSS

#page1 {
  height: 100vh;
  width: 100%;
  background-color: pink;
}
#page2 {
  height: 100vh;
  width: 100%;
  background-color: skyblue;
}
#page3 {
  height: 100vh;
  width: 100%;
  background-color: limegreen;
}

Add following code in JS

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

Now I Have added a div tag which contains an image on which we are going to show some locomotive properties

 <div id="page2">
        <div id="page2-div">
            <img data-scroll data-scroll-speed="5" src="https://t4.ftcdn.net/jpg/06/10/26/15/360_F_610261529_vk9kf4ooTP5eSsQdOEyB4miRHn1YWCD1.jpg" alt="">
        </div>

Here data-scroll and data-scroll-speed is an attribue for HTML. you have to add the data-scroll if you want to apply Locomotive.js. It increase smoothness of the page. And Data-scroll-speed is the speed of element on which it applied. i.e., when you scroll your webpage it will scroll more faster compare to other. You Can Also put Negative values -1,-2… It Will just work opposite of positive.

Next Attribute You Can Add is data-scroll-direction which can be vertical and horizontal. So, if you put horizontal it would move in horizontal direction.

<img data-scroll data-scroll-speed="5" src="https://t4.ftcdn.net/jpg/06/10/26/15/360_F_610261529_vk9kf4ooTP5eSsQdOEyB4miRHn1YWCD1.jpg" alt="">

Data-Scroll-Section is also used to improve smoothness.

Data-Scroll-Call it is a great attribute. It is used to call a function in js file. When Element in view it calls an element. Here a general example.

 <div id="page2-div">
            <img id="img" data-scroll-call="testEvent" data-scroll data-scroll-speed="5" src="https://t4.ftcdn.net/jpg/06/10/26/15/360_F_610261529_vk9kf4ooTP5eSsQdOEyB4miRHn1YWCD1.jpg" alt="">
 </div>

const el=document.getElementById("img")

scroll.on("call",(ans)=>{
    if (ans=="testEvent") {
        el.style.borderRadius="10px"
    }
})

When element comes in view it would change it’s radius.

Data-Scroll-Sticky used to Make An Element Sticky.It Works Better with Data-Scroll-Target. It Will Make it sticky to a position.

<section id="section-1" data-scroll-section>
      <!--    sticky element     -->
      <div class="sticky" data-scroll data-scroll-sticky data-scroll-target="#section-1">sticky content</div> 
    </section>

Instances Method in Locomotive

init(): Reinitializes the scroll
on(eventName, function): Listens to instance events
update(): Updates all element positions
destroy(): Destroys the scroll events
start(): Restarts the scroll events
stop(): Stops the scroll events
scrollTo(target, offset): Scrolls to an element

Many Methods are not that useful but the method I Am Going to show you is Quited Good.

scrollTo Method you can use to navigaet to a section of webpage.

Here’s A Simple Code

<div id="page3">
        <button id="mine">Go Back</button>
      </div>

document.querySelector('#mine').addEventListener('click', () => {
    scroll.scrollTo(0);
  });

Locomotive Scroll V5 Beta

This is A New Version of Locomotive js Combined with Lenis.js. You Can check website here.

Conclusion

So You Can Understand the Setup of Locomotive.js and also Main Methods and Attributes which you can use to create a good website.

If you Have any Further Questions You Can Ask me.

You can check Locomotive Github. Here. And My Github to Get The Code.

In Next Blog We are going to implement Locomotive.js on React

If You Like My Work Please Share And Appreciate and follow me on LinkedIn.

Getting Started with Locomotive Scroll: A Beginner’s Guide

What we are going to do?

Instances Method in Locomotive

Locomotive Scroll V5 Beta

Conclusion

Written by Shadowshukla