Using Locomotive Scroll in Vue for Smoother UX

Pieces 🌟 - Jan 13 '23 - - Dev Community

Using locomotive scroll in Vue for smoother UX.

Websites, especially those with enormous amounts of material, can use scrolling animations as features to make browsing more enjoyable. With the advent of specialized libraries, scrolling animations are becoming increasingly widespread on the web. Web pages may use a variety of scroll movements, including sticky scroll, smooth scroll, CSS parallax, and more. In this article, we’ll be using Locomotive scroll to create a smoother user experience with scroll effects.

What is Locomotive Scroll?

The Locomotive scroll is a scrolling library that is used to create custom scrollers that support touch, keyboard, and mouse interactions. It comes with a variety of customizable features including Locomotive Smooth scroll, Page overlay scroll, and parallax effects.

Why use Locomotive Scroll?

An accessible and fully customized website is one of a developer’s main priorities for users. With the browser's default scroll, just a few scroll effects are possible. However, we can alter how your website scrolls and behaves when you go from page to page thanks to the Locomotive scroll library. Now, let’s walk through how to use Locomotive scroll.

Installation

Let’s get started with scaffolding our Vue application. Run the command below in the terminal.

yarn create vite my-vue-app vue-locomotive-scroll
Enter fullscreen mode Exit fullscreen mode

Once the command above is done installing all of the required files, install the locomotive scroll library using the command below.

cd vue-locomotive-scroll && yarn add locomotive-scroll
Enter fullscreen mode Exit fullscreen mode

Project Setup

Let’s create a basic home page that we’ll customize later with some cool locomotive scroll speed effects. To achieve this, replace all of the code in the App.vue file with the code below.

<template>
  <main>
    <section className="hello">
      <h1>Hello World From Sam</h1>
    </section>
    <section id="sticky">
      <h1>Sticky scroll example</h1>
      <p>Placeholders Placeholders</p>
      <p>Placeholders Placeholders</p>
      <p>Placeholders Placeholders</p>
      <p>Placeholders Placeholders</p>
    </section>
    <section className="parallax">
      <h1>Vertical Parallax scroll</h1>
      <h1>Horizontal Parallax Scroll</h1>
    </section>
    <section className="scroll-into-view">
      <h1>
        Here, we're calling the Animate class when the Content scrolls into view
      </h1>
    </section>
  </main>
</template>

<script>

</script>

<style>
section {
 height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 color: white;
 font-size: xx-large;
}
.hello {
 background-color: red;
 background-image: url("./background.png");
 color: rgba(0, 0, 0, 0.745);
}
.parallax {
 background-color: greenyellow;
}
#sticky {
 background-color: rgba(137, 43, 226, 0.469);
 padding: 50px;
}
.scroll-into-view {
 background-color: black;
 color: white;
}
</style>
Enter fullscreen mode Exit fullscreen mode

In the code above, we’re creating four sections, namely, hello, sticky, parallax, and scroll-into-view. These will be customized later on in this tutorial.

For the hello style, we’re adding a background image. Download this image and add it to the src/assets folder.

With the project setup complete, run the code using yarn dev to see the results below.

A beginning demo of Locomotive Scroll.

Configuring Locomotive Scroll

Let’s configure the Locomotive Scroll library into our application before looking at its features. Update the <main> tag in the App.vue file.

<template>
  <main ref="container">

       <!-- other code blocks here -->

  </main>
</template>
Enter fullscreen mode Exit fullscreen mode

In the code block above, we’re giving the <main> tag an identifier, a ref value.

Next, copy and paste the code below into the <script> tag.

<script>
import LocomotiveScroll from "locomotive-scroll";

export default {
  methods: {
    setLocomotiveScroll() {
 new LocomotiveScroll({
        el: this.$refs.container,
      });
    },
  },
  mounted() {
 this.setLocomotiveScroll();
  },
};
</script>
Enter fullscreen mode Exit fullscreen mode

In the code above, we’re calling the setLocomotiveScroll() function whenever the page is initialized on the browser. The setLocomotiveScroll() function creates a new LocomotiveScroll instance that accepts certain properties for its customization.

The el property initializes its children as a scrollable container.

Finally, replace all of the code in the style.css file with the code block below.

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
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;
}
Enter fullscreen mode Exit fullscreen mode

The code block above is the recommended style when using Locomotive Scroll to prevent page distortion.

Locomotive Scroll Features

A number of features are included in the Locomotive Scroll package to provide your website with a nice UX and UI. We'll examine some of the Locomotive Scroll package's most practical capabilities in this section.

Locomotive Smooth Scroll

Locomotive Smooth Scroll is one of the major Locomotive Scroll effects; this gives the page a sleek and fluid scroll experience. Let’s add this to our page.

export default {
  methods: {
    setLocomotiveScroll() {
 new LocomotiveScroll({
        el: this.$refs.container,
        smooth: true,           //added this
      });
    },
  },
  mounted() {
 this.setLocomotiveScroll();
  },
};
Enter fullscreen mode Exit fullscreen mode

In the code block above, we’re setting the smooth property to true.

Using Smooth scroll.

Locomotive Scroll Speed

With the Locomotive Scroll library, the scrolling speed of a page can be fully customized. This feature is dependent on the smooth scrolling feature.

export default {
  methods: {
    setLocomotiveScroll() {
 new LocomotiveScroll({
        el: this.$refs.container,
        smooth: true,
        multiplier: 5,        //add this
      });
    },
  },
  mounted() {
 this.setLocomotiveScroll();
  },
};
Enter fullscreen mode Exit fullscreen mode

In the block above, we’re adding the multiplier property to the LocomotiveScroll instance. The multiplier boosts or reduces the scrolling speed of the page based on the value provided.

Using speed scroll.

Locomotive Scroll Attributes

Before looking into other Locomotive Scroll features, let’s review Locomotive Scroll attributes.

Locomotive scroll attributes are custom classes that give children tags special locomotive effects.

These include:

data-scroll-container: This is a required attribute used mostly in the top-level tag of the container to define the scroll container of the application.

data-scroll: This attribute detects if an element is in view, and is necessary when trying to add an effect to any element.

data-scroll-section: This attribute defines a scrollable section within your section.

data-scroll-speed: This sets the speed of the element it's used on.

data-scroll-direction: This helps in parallax scrolling. It scrolls the element into place from the direction specified.

data-scroll-target: This attribute targets the element’s location when it scrolls into view.

data-scroll-repeat: When set as true, this attribute makes all effects repeat their initial phase, thus causing a continuous effect when scrolling over.

Section Overlay Scroll

Creating a nice visual effect where a section scrolls over the previous section before going out of view can easily be achieved with the Locomotive Scroll library. Let’s add this to our application.

<template>  
  <main ref="container" data-scroll-container>
    <section
      className="hello"
      data-scroll
      data-scroll-speed="2"
      data-scroll-section
    >
      <h1>Hello World From Sam</h1>
    </section>

    <section id="sticky" data-scroll-section>
      <h1>Sticky scroll example</h1>
      <p>Placeholders Placeholders</p>
      <p>Placeholders Placeholders</p>
      <p>Placeholders Placeholders</p>
      <p>Placeholders Placeholders</p>
    </section>

    <section className="parallax" data-scroll-section>
      <h1>Vertical Parallax scroll</h1>
      <h1>Horizontal Parallax Scroll</h1>
    </section>

    <section className="scroll-into-view" data-scroll-section>
      <h1>
        Here, we're calling the Animate class when the Content scrolls into view
      </h1>
    </section>
  </main>
</template>
Enter fullscreen mode Exit fullscreen mode

In the code block above, we’re initializing all of the sections using the data-scroll-section attribute to prevent page distortion among the sections. We’re then making the hello section with the data-scroll attribute to enable the Locomotive Scroll feature to work on it when its in view. We’re also delaying the scroll-out time of the hello sections by setting the speed to 2. This combo gives rise to the Scroll-overlay animation.

Using section overlay scroll.

Locomotive Scroll Sticky

Pinning an element in its position when scrolling can also be implemented with the Locomotive Scroll library. Let’s implement this by updating the <h1> tag in the sticky section.

<template>
  <main ref="container">
    ...     <!-- other code blocks here -->

    <section id="sticky" data-scroll-section>
      <h1
        data-scroll
        data-scroll-sticky
        data-scroll-target="#sticky"
      >
        Sticky scroll example
      </h1>
      <p>Placeholders Placeholders</p>
      <p>Placeholders Placeholders</p>
      <p>Placeholders Placeholders</p>
      <p>Placeholders Placeholders</p>
    </section>

    ....     <!-- other code blocks here -->
  </main>
Enter fullscreen mode Exit fullscreen mode

In the code block above, we added the data-scroll-sticky attribute to our h1 tag. We also pinpointed the target section that we want the text to stick to, which is the sticky section.

Using sticky scroll.

Locomotive Scroll Parallax

Parallax scrolling means moving elements around a page either horizontally or vertically at different speeds when scrolling. Let’s see how we can achieve this in our Locomotive parallax section.

<template>
  <main ref="container">
    ....     <!-- other code blocks here -->

    <section className="parallax" data-scroll-section>
      <h1 data-scroll data-scroll-direction="vertical" data-scroll-speed="9">
        Vertical Parallax scroll
      </h1>
      <h1 data-scroll data-scroll-direction="horizontal" data-scroll-speed="9">
        Horizontal Parallax Scroll
      </h1>
    </section>

    ....     <!-- other code blocks here -->
  </main>
</template>
Enter fullscreen mode Exit fullscreen mode

In the code block above, we added the data-scroll-direction to both h1 tags and specified the direction we want them to flow. We also increased the speed to make it move faster when scrolling.

Using Locomotive scroll parallax.

Scroll-into-view Classes

Sometimes we want to add some style to an element when it is scrolled into view and remove it when it is out of view. The Locomotive Scroll library makes this feature very easy to achieve; this comes in handy when dealing with certain animations.

<template>
  <main>
    ....     <!-- other code blocks here -->

    <section className="scroll-into-view" data-scroll-section>
      <h1
        className="hint-text"
        data-scroll
        data-scroll-repeat="true"
        data-scroll-class="animate"
        data-scroll-speed="5"
      >
        Here, we're calling the Animate class when the Content scrolls into view
      </h1>
    </section>
  </main>
</template>
Enter fullscreen mode Exit fullscreen mode

In the code block above, we’re adding the hint-text to the h1 tag making the tag invisible on the initials. When it scrolls into view, we’re adding the animate class, which contains some animations to fade in the tag. We repeat this process every time the user scrolls to this section.

Using scroll-into-view classes.

Building a Simple Landing Page with Locomotive scroll features

Let’s build a Mini project with all of the Locomotive features we’ve discussed. To get started, clone the project starter file from Github.

Our final landing page project.

First, install and configure the Locomotive Scroll library the same way we did in the “Configuring Locomotive Scroll” section. With that done, your App.vue should look like the code below.

<template>
  <main ref="container" data-scroll-container>
    <Introduction />
    <Services />
    <Appreciation />
  </main>
</template>
<script>

import Introduction from "./components/Introduction.vue";
import Services from "./components/Services.vue";
import Appreciation from "./components/Appreciation.vue";
import LocomotiveScroll from "locomotive-scroll";

export default {
  components: {
    Introduction,
    Services,
    Appreciation,
  },

  methods: {
    setLocomotiveScroll() {
 new LocomotiveScroll({
        el: this.$refs.container,
      });
    },
  },

  mounted() {
 this.setLocomotiveScroll();
  },
};
</script>
Enter fullscreen mode Exit fullscreen mode

Next, we’ll add smooth Locomotive scrolling and multiplier properties to our Locomotive scroll instance to give it some swift scrolling and speed.

setLocomotiveScroll() {
 new LocomotiveScroll({
        el: this.$refs.container,
        smooth: true,
        multiplier: 3,
 });
},
Enter fullscreen mode Exit fullscreen mode

Head over to the Introduction.vue file in the src/components/ folder and update the template to the code block below.

<template>
  <section data-scroll data-scroll-speed="2" data-scroll-section>
    <h1 data-scroll-speed="2" data-scroll>
      Welcome to Jexxi Code
      <br />
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nostrum tenetur
      magnam natus repellat quod dolorem culpa excepturi doloremque, autem.
    </h1>
    <div>
      <img src="../assets/man-thinking.png" />
    </div>
  </section>
</template>
Enter fullscreen mode Exit fullscreen mode

Now we’ve registered our section with the Locomotive library and given the h1 text some scroll speed to make it scroll off of the page before it is completely removed.

Next, head over to the Services.vue file in the scr/components folder and update the template to the code below.

<template>
  <section id="sticky" data-scroll-section>
    <div class="service-text">
      <h1
        data-scroll
        data-scroll-sticky
        data-scroll-target="#sticky"
        data-scroll-speed="9"
      >
        Services we Offer
      </h1>
    </div>
    <div>
      <ServiceText />
      <ServiceText />
      <ServiceText />
    </div>
  </section>
</template>
Enter fullscreen mode Exit fullscreen mode

We’ve made our h1 text stick to its position on the screen whenever the user scrolls.

Finally, head over to the Appreciation.vue file also in the src/components and update the template to the code below.

<template>
  <section data-scroll-section>
    <h1
      className="appreciation-text"
      data-scroll
      data-scroll-repeat="true"
      data-scroll-class="animate"
      data-scroll-speed="5"
    >
      Thank You For Using The Locomotive Scroll Library
    </h1>
    <br />
    <h2 data-scroll data-scroll-direction="horizontal" data-scroll-speed="9">
      - Sam Victor
    </h2>
  </section>
</template>
Enter fullscreen mode Exit fullscreen mode

In the code block above, we’re adding the animate class whenever the user scrolls this section into view to give our element a fade-in animation. We’re also giving the h2 tag some parallax scroll effect with speed.

With our achievements so far, run the code using yarn dev to get the project running.

Combining the features of Locomotive Scroll to create a landing page.

Conclusion

In this article, we’ve practiced some Locomotive scroll examples. We learned how to configure, use and build with the Locomotive library. We’ve also seen how to combine two or more attributes to build some nice effects. Head over to the official documentation to find out more about the library.

Here is the link to the complete source code on Github.

Image
DAO Generator

java, dao, database, persistence
Image
롤토토의 매력: 승리의 방정식을 찾아서
Image
spek penting di website slots online bermutu
Image
Five Tools Everybody Involved In In Wall Electric Fire Place Industry Should Be Using
Image
10 Websites To Help You Become An Expert In Crypto Coin Casino
Image
Watch Out: How Key Fob Repair Near Me Is Taking Over And What You Can Do About It
Image
Aluminum Dome Roofs: Why They're Ideal for Storage Solutions
Image
Getting Started with the Minds JavaScript SDK
Image
Managing Google Workspace Part 1: Core Services, Additional Services and Marketplace Apps

googleworkspace, google, certification, notes
Image
All you need to know about Redux
Image
Comprehensive Guide to Biogas Holders: Applications, Benefits, and Features
Image
Jak stworzyć idealne mieszkanie: Przewodnik po stylu i funkcjonalności
Image
Bifold Door Repairs Near Me: The Secret Life Of Bifold Door Repairs Near Me
Image
A Brief History Of Non Asbestos Causes Of Mesothelioma History Of Non Asbestos Causes Of Mesothelioma
Image
10 Tips For Bi Fold Door Repair That Are Unexpected
Image
langkah mengoptimalkan pemasukan judi slots online
Image
20 Trailblazers Lead The Way In Accident Attorney
Image
Passing Django request object
Image
#85 — Calculate Using Adjacent Row/Interval When Data of The Same Group Is Continuous (Link Relative Ratio And YOY)

beginners, tutorial, programming, productivity
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .