Libraries like Locomotive Scroll and React Scroll Parallax are used to enhance your website’s scroll performance. You’ve probably seen lovely animations that appear while scrolling down a website and then noticed that it responds with effects, a customized speed, rotation, and translating objects that take effect. Both libraries will be compared in-depth in this article, along with their benefits and drawbacks, as well as practical usage.
After giving you a glimpse of the scroll animations you frequently see on websites, this article’s primary goal is to compare Locomotive Scroll and React Scroll Parallax for you. Upon reading these articles, hopefully you will want to look into Locomotive Scroll and React Scroll Parallax, which are two frequently used scrolling libraries. It may be worth considering discussing the suitability of the two widely-used scrolling libraries, Locomotive Scroll and React Scroll Parallax.
What is Locomotive Scroll?
Locomotive Scroll is a JavaScript library that creates smooth scrolling effects on web pages. It enables programmers to produce visual effects where different elements on a page scroll at different rates to give the impression of depth and dimension. The speed at which elements scroll can also be changed, and easing effects can be added. Locomotive Scroll is a great option because it is lightweight, flexible, and simple to use.
To animate the scroll position of the page, Locomotive Scroll intercepts the browser’s standard scrolling behavior and uses JavaScript. This enables controlled, slick scrolling that can be tailored to produce a range of effects. Locomotive Scroll can be used for parallax effects, where background images move more slowly than the foreground, as well as for other animations like fade-ins and slide-ins. The following is a display from the Locomotive Scroll website, featuring impressive animation effects when scrolling.
The simplicity of Locomotive Scroll’s use is one of its main advantages. The library is a popular option for web developers who want to add scrolling effects to their websites without having to write complex code from scratch because it is lightweight and straightforward to implement. With Locomotive Scroll, it’s possible to design websites with a polished appearance and enticing scrolling animations that grab users’ attention and improve the user experience as a whole.
Notable limitations of Locomotive Scroll
Despite the numerous benefits of Locomotive Scroll, there are also several significant limitations associated with it that will be highlighted in this section.
- Web browsers can interpret Locomotive Scroll’s designs in various ways, leading to inconsistent experiences for users across different platforms.
- Locomotive Scroll’s compatibility with smaller touch screens can hinder effective content navigation and interaction for users.
- Screen readers and other assistive technologies may have difficulty working with Locomotive Scroll due to limited compatibility.
What is React Scroll Parallax?
A React component called React Scroll Parallax gives web pages visual effects. It enables developers to make a scrolling effect where various page elements move at various speeds based on where they are in the view. This enhances the website’s overall visual appeal by giving the appearance of depth and dimension. An illustration of a display that demonstrates how each element moves at different speeds is shown below.
React Scroll Parallax offers a wide range of options for developers to modify the scrolling behavior, including the speed and direction of the parallax effect. This component is small, simple to use, and works with the majority of current browsers.
React Scroll Parallax causes various elements to scroll at various rates as the user scrolls down the page by changing the position of the web page’s scroll bar. This can be used to produce a variety of effects, such as animated backgrounds, text that fades in and out, and slower-moving foreground images. A website’s user experience can be improved by using this library, which is adaptable and can be used to create a variety of parallax scrolling effects.
Notable drawbacks of React Scroll Parallax
In this section, we will outline a few common limitations of React Scroll Parallax. However, it’s important to note that these drawbacks are relatively minor and do not significantly impact the usability of the library on our website.
- Compatibility issues across different browsers and devices
- Performance problems may arise on devices with low specifications or when a user’s internet connection is slow.
- Compatibility with older versions of React or other libraries is limited.
The difference(s) between Locomotive Scroll and React Scroll Parallax
You might find yourself thinking that these two libraries sound very similar, but there are differences. React Scroll Parallax is specifically made for use with React, whereas Locomotive Scroll is a standalone library that works with any JavaScript framework.
Another distinction is that Locomotive Scroll gives programmers more control over the scrolling behavior, including the ability to add easing effects, modify the scroll speed, and so on. On the other hand, React Scroll Parallax is optimized and supports server-side rendering, making it a good option for developing websites that are search engine friendly.
Benefits and drawbacks of both libraries
It’s common to use the libraries Locomotive Scroll and React Scroll Parallax to add parallax scrolling effects to web pages. Following is a summary of some of the two libraries’ potential benefits and drawbacks:
Locomotive Scroll
Benefits:
- Highly customizable, giving programmers more control over how scrolling behaves.
- It’s ultra-light, which makes it simple to alter and expand its functionality.
- Compatible with any JavaScript framework and provides support for multiple scroll directions and axes.
- Offers fluid and natural scrolling effects to improve user experience.
- Locomotive Scroll enhances brand recognition.
Drawbacks:
- Performance on websites may be slowed down.
- The animated scrolling may be overwhelming or distracting to users.
React Scroll Parallax
Benefits:
- Offers a variety of background images, text, and other elements as well as options for parallax scrolling effects.
- React is built on top of it, making it simple to integrate with other React libraries and components.
- Offers a high level of customization through props and configuration options.
Drawbacks:
- To use effectively requires some familiarity with JSX and React.
- Could make a React project more complex and burdensome.
- On older browsers or devices, it might not operate as smoothly.
Comparison between Locomotive Scroll and React Scroll Parallax
When deciding which scrolling library is best for your project, comparing Locomotive Scroll and React Scroll Parallax can be helpful. The performance, community, statistical comparison, size and load times, file structure, license, popularity, and learning curve of these two scrolling libraries will all be covered in this section. Because it covers everything you need to know about these two libraries and when to use them, this comparison is significant.
Performance
Due to the different ways that Locomotive Scroll and React Scroll Parallax are intended to be used, it is challenging to directly compare their performance. However, both libraries are lightweight and optimized, so they shouldn’t have a significant impact on a website’s speed and responsiveness in most cases.
Locomotive Scroll: provides more control over the scrolling behavior, including easing effects and scrollable high speed, which, if improperly used, could have an adverse effect on performance. However, it is still a very effective library that is made to operate without a hitch on contemporary browsers.
React Scroll Parallax: is a performance-optimized solution that works with server-side rendering to cut down on the number of requests made to the server and speed up page load times. Additionally, React, which is renowned for its quick rendering speed and performance, is designed to work well with it.
Community
Developers actively use and contribute to the communities for Locomotive Scroll and React Scroll Parallax.
Locomotive Scroll: has a larger user base and has been around longer, so there are more online resources and examples available. Additionally, the library has a GitHub repository and a dedicated documentation website where users can report bugs and participate in the library’s development.
React Scroll Parallax: is a relatively new library, but React developers are starting to use it more frequently because of how simple it is to use and how well it works with server-side rendering. Users can report bugs and assist in the development of the library by contributing to its GitHub repository. Additionally, there is a Discord channel where users can ask questions and share their experiences as well as a dedicated documentation website.
Statistical comparison
At the time of writing, Locomotive Scroll had received over 7,935 weekly downloads, On the other hand, React Scroll Parallax has more than 34,696 weekly downloads. These figures imply that both libraries are widely used in web development projects and are well-liked by developers. It is crucial to remember that download counts do not always indicate how good or appropriate a library is for a given project.
Size and load times
Compared to React Scroll Parallax, Locomotive Scroll is a bigger library in terms of size. React Scroll Parallax is about 197 kB, while Locomotive Scroll is about 347 kB. A website’s load times may be impacted by this size difference, especially on slower internet connections.
However, due to their lightweight construction and performance optimization, both libraries should have a negligible impact on load times. The size of the website, the number of assets being loaded, and the speed of the user’s device and internet connection will all affect how long it takes for pages to load in practice.
Even though Locomotive Scroll is bigger than React Scroll Parallax, both libraries are performance-optimized and shouldn’t have a significant impact on how quickly a website loads. The actual load times will depend on several variables and may differ from one website to another.
File structure
Depending on the specific implementation and framework employed, the file structure for Locomotive Scroll and React Scroll Parallax will vary, but we can offer some general information.
Since Locomotive Scroll is a stand-alone library, it can be used with any framework or library. It is typically added to a project using a script tag in the HTML file and installed using npm. The library is composed of a single JavaScript file containing the library code and a CSS file containing the library’s default styles. Locomotive Scroll’s file structure is comparatively straightforward, making it simple to incorporate into any project.
In contrast to Locomotive Scroll, React Scroll Parallax is made specifically for use with React and has a different file structure. The components and hooks offered by the library are imported into a React project after the library is typically installed using npm. React Scroll Parallax’s file structure will vary depending on the implementation and framework used, but it typically consists of numerous JavaScript files that contain the library’s code and CSS files that contain the library’s default styles.
License
The MIT License, a permissive license that permits distribution, commercial use, modification, and private use, is the one that governs Locomotive Scroll. Licensed works, modifications, and larger works may be distributed under different terms and without source code, with the only requirements being the preservation of copyright and license notices.
The MIT License, which is the same as the terms of the Locomotive Scroll license, is also the license for React Scroll Parallax, allowing users to freely use, modify, and distribute the software.
The terms of the license stipulate that all copies or significant portions of the software must bear the copyright and permission notices, and it is without warranty.
Popularity
As of February 2023, the NPM registry shows that React Scroll Parallax had been downloaded more than 2.7 million times, while Locomotive Scroll had been downloaded more than 1.5 million times. This implies that React Scroll Parallax may enjoy greater download popularity. React Scroll Parallax and Locomotive Scroll have over 2,346 and 6,205 stars, respectively, on GitHub. Due to the numerous variables that can affect how many stars a project receives, this metric might not be a trustworthy gauge of popularity.
Learning curve
Depending on how familiar a developer is with the respective technologies, Locomotive Scroll and React Scroll Parallax have different learning curves.
Any web project, regardless of the technology stack, can incorporate Locomotive Scroll. It has an easy-to-use API and offers thorough documentation and examples on its website. Locomotive Scroll should be simple to learn for developers with JavaScript and CSS experience.
React Scroll Parallax is a library created specifically for use with React. React developers should be able to get up and running quickly, as the library includes a set of components and hooks for creating parallax effects. Developers who are new to React may need to spend some time learning the framework’s basics before using React Scroll Parallax.
Installation/setup
Installing and configuring Locomotive Scroll and React Scroll Parallax will be covered in this section. These two libraries will be used to build two straightforward websites, and installation is not difficult. The website won’t require much work to build, and everything used will be clearly explained.
Locomotive Scroll
Install Locomotive Scroll by running npm install locomotive-scroll to get started using it in standard JavaScript. After installing the library, you must configure it using the following code:
<script src="/node_modules/locomotive-scroll//dist/locomotive-scroll.min.js"></script>
<script>
const scroller = new LocomotiveScroll({
el: document.querySelector("[data-scroll-container]"),
smooth: true,
});
</script>It’s time for you to learn how to use Locomotive Scroll’s library now that you have configured it.
Use the data-scroll-container attribute to initialize the scrolling effects on your website. This is positioned immediately after or within the body element. The data-scroll attributes must be present in any element that will have the desired effects.
Some attributes are discussed below:
- data-scroll-direction: this defines the direction of the object for propagation.
- data-scroll-speed: this defines the speed of the transition. Setting a negative value can make an object move in the opposite direction.
- data-scroll-class: this works with the default class name coming from Locomotive Scroll, such as appear class which makes an element appear when it reaches the viewpoint.
- data-scroll-repeat: to repeat a scroll animation in-view.
To learn more about using Locomotive Scroll, click here.
The straightforward website we’ll be building with Locomotive Scroll is shown below. I’ll be pasting the website’s unique custom CSS under the output.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="/node_modules/locomotive-scroll/dist/locomotive-scroll.css"
/>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
.bg-img {
width: 100%;
height: 500px;
object-fit: cover;
}
.centerd-text {
text-align: center;
}
.last-text {
height: 200px;
}
.large {
font-size: 40px;
}
.fantastic {
width: 70%;
padding: 10px;
background-color: black;
margin: auto;
border-radius: 20px;
margin-bottom: 20%;
}
.fantastic h1 {
text-align: center;
color: white;
}
.fantastic button {
display: block;
margin: auto;
background-color: white;
outline: none;
padding: 10px 22px;
border-radius: 10px;
border: none;
margin-top: 20px;
cursor: pointer;
}
</style>
</head>
<body data-scroll-container class="first-element">
<div class="wrapperr">
<div data-scroll-section>
<h1
class="large"
data-scroll
data-scroll-direction="horizontal"
data-scroll-speed="-7"
data-scroll-class="appear"
data-scroll-repeat="true"
style="margin-left: -20px"
>
Mountain
</h1>
</div>
<section data-scroll-section>
<img
class="bg-img"
data-scroll
data-scroll-direction="horizontal"
data-scroll-speed="5"
data-scroll-class="appear"
data-scroll-repeat="true"
src="https://images.pexels.com/photos/1260841/pexels-photo-1260841.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
/>
</section>
<div data-scroll-section>
<h1
class="centerd-text large"
data-scroll
data-scroll-direction="horizontal"
data-scroll-speed="10"
data-scroll-class="appear"
data-scroll-repeat="true"
>
Ocean
</h1>
</div>
<section data-scroll-section>
<img
class="bg-img"
data-scroll
data-scroll-direction="horizontal"
data-scroll-speed="-5"
data-scroll-class="appear"
data-scroll-repeat="true"
src="https://images.pexels.com/photos/1533720/pexels-photo-1533720.jpeg?auto=compress&cs=tinysrgb&w=800"
/>
</section>
<section data-scroll-section>
<div
class="fantastic"
data-scroll
data-scroll-direction="vertical"
data-scroll-speed="10"
data-scroll-class="appear"
data-scroll-repeat="true"
>
<h1>Thankls for scrolling</h1>
</div>
</section>
</div>
</body>
<script src="/node_modules/locomotive-scroll//dist/locomotive-scroll.min.js"></script>
<script>
const scroller = new LocomotiveScroll({
el: document.querySelector("[data-scroll-container]"),
smooth: true,
});
</script>
</html>The aforementioned code includes the fundamental CSS styles, the actual HTML code that contains the attributes from Locomotive Scroll, and the configuration-related javascript code. By clicking here, you can download the source code. Using Locomotive Scroll, you can also customize the code and add new features to your website.
React Scroll Parallax
Installing and configuring React Scroll Parallax is something we’ll do in this section. We’ll also talk about how to use it to build a basic website in this article. Run npm I react-scroll-parallax in your terminal to install the library. You must import the library into your React application after installation. Use the code below to import the library:
import { useParallax } from "react-scroll-parallax";You can use the library once you have imported it, however, let’s first go over the library and how to use the component before we begin writing code. Using React Scroll Parallax, you can create components with objects like translate, scale, rotate, and adjust speed.
To work with React Scroll Parallax, please wrap the App.js component inside the App.js files with the ParallaxProvider component before proceeding:
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { ParallaxProvider } from "react-scroll-parallax";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<ParallaxProvider>
<App />
</ParallaxProvider>
</React.StrictMode>
);
reportWebVitals();For the benefit of the website, we’ll be using the Parallax component, which consists of the objects scaleX, rotatey, translateX, translatey, and easing. An array, for which it is a little complicated to set the direction of the object, is given to it as a value. However, in order to learn more about these objects from the Parallax component, you must visit the official docs. But before you go to the website to learn more, take a look at the syntax of a straightforward scaleX-based parallax component.
const scaleCParallax = useParallax({
scaleX: [0, 3, "easeInQuad"],
});Below is an output of the simple web page that I created with react-scroll-parallax:
React code:
import "./App.css";
import { useParallax } from "react-scroll-parallax";
const App = () => {
const scaleCParallax = useParallax({
scaleX: [0, 3, "easeInQuad"],
});
const parallaxRotateY = useParallax({
rotateY: [0, 360],
});
const parallaxEasing = useParallax({
easing: "easeOutQuad",
translateX: [-340, 100],
});
const parallaxEasingLeft = useParallax({
easing: [1, -0.75, 0.5, 1.34],
translateX: [0, -260],
translateY: [1100],
});
return (
<div>
<header>
<nav>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Services</li>
<li>Register</li>
</nav>
</header>
<section className="bg-container">
<img
ref={parallaxRotateY.ref}
src="https://images.pexels.com/photos/1454360/pexels-photo-1454360.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
/>
<div className="absolute-text">
<h1 ref={parallaxEasing.ref}>WELCOME</h1>
<h2 ref={parallaxEasingLeft.ref}>Get Started</h2>
</div>
</section>
<br />
<section className="card-container" ref={scaleCParallax.ref}>
<div className="card">
<img src="https://images.pexels.com/photos/1181243/pexels-photo-1181243.jpeg?auto=compress&cs=tinysrgb&w=800" />
<div>
<h2>Programming</h2>
<p>
Coding encourages students to think creatively and outside the box
in order to solve problems. They can use their imagination to
create new programs, games, or applications that will benefit
society.
</p>
</div>
</div>
<div className="card">
<img src="https://images.pexels.com/photos/196644/pexels-photo-196644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
<div>
<h2>UI and UX design</h2>
<p>
Critical thinking and creative problem-solving are required for UI
and UX design. Students can use their imagination to create
unique, aesthetically pleasing designs that captivate users..
</p>
</div>
</div>
</section>
<br />
<br />
<br />
<section className="subscribe-section">
<p>Kinfly create an account to get started</p>
<br />
<button>Create an account</button>
</section>
</div>
);
};
export default App;CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
background-color: black;
color: white;
}
header nav {
display: flex;
align-items: center;
}
header nav li {
list-style-type: none;
margin-right: 10px;
padding: 10px;
cursor: pointer;
}
img {
object-fit: cover;
}
.bg-container {
position: relative;
}
.absolute-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.absolute-text h1 {
font-size: 5rem;
}
.bg-container img {
width: 100%;
height: 90vh;
}
.card-container {
display: flex;
width: 80%;
margin: auto;
}
.card {
flex-basis: 50%;
margin: 10px;
line-height: 1.6;
}
.card img {
width: 100%;
}
.subscribe-section {
width: 80%;
display: block;
margin: auto;
text-align: center;
background-color: tan;
padding: 20px;
}
.subscribe-section button {
padding: 10px;
outline: none;
cursor: pointer;
}When to one or the other
Now let’s talk about when to use Locomotive Scroll and React Scroll Parallax. For our front-end project, both libraries are useful, and we need to know when to use one or the other
When to use Locomotive Scroll
Locomotive Scroll is particularly useful for websites with single-page layouts or lengthy pages with numerous sections. Users can easily move between the sections of the content on the page without having to manually scroll through each one. Furthermore, Locomotive Scroll works wonders for websites that want to add a modern, stylish touch to their design. It can be used to create distinctive scrolling animations that can help capture users’ attention and keep them engaged with the page’s content.
When to use React Scroll Parallax
React Scroll Parallax creates the illusion of layers moving at different speeds as the user scrolls through the page, adding depth and dimension to website designs. React Scroll Parallax is especially useful for websites that want to produce an engaging and visually-stunning user experience. It can be used to add a dynamic and interesting element to the design of a website to distinguish it from rival websites. Additionally, websites should use React Scroll Parallax if they want to tell a compelling story. It can be used to create a seamless transition from one area of the page to another, giving the impression that the story is flowing.
Locomotive Scroll Vs React Scroll Parallax: which is better?
It’s hard to choose a clear winner as each library has situations in which it might be more appropriate than the other. The character of your project will largely dictate which library is better for your use case. Both libraries are effective resources for building interesting and visually appealing websites, and each has a unique set of features and advantages. React Scroll Parallax may be a better option if you are building a React application and want to add parallax scrolling effects. Locomotive Scroll might be a better choice if you want a standalone library and need more control over the scrolling experience.
Conclusion
Both Locomotive Scroll and React Scroll Parallax have their respective advantages and disadvantages. The best choice will depend on your level of programming expertise and the goals of your project. Both tools might be appropriate to use if you know JavaScript well. You might want to try React Scroll Parallax if you are familiar with Locomotive Scroll and want to improve the scrolling on your website.
