Should I use Locomotive Scroll on my project?

Locomotive Scroll is one of our most popular tools. Here are some tips to determine if LS is the optimal library for your project, and fresh insights on using it wisely!

But first… what’s Locomotive Scroll?

Two words: scroll hijacking. More on that later, but know that our LS library uses the scroll hijacking concept to deliver a more fluid scrolling experience throughout the page, while allowing advanced animations.

Scroll hijacking means taking control of a browser’s native scroll to modify its behaviour, speed, direction, easing, delay, and stopping and starting the scroll, for example. Clearly, it’s a powerful tool for expanding creative possibilities and personalizing a navigation experience.

We launched LS in 2016, and decided to make it open source. Now, we have more than 20,000 downloads a month! For the background story: The Evolution of Scrolling at Locomotive.

So, is Locomotive Scroll right for your project?

Fluid experience

The first thing people notice when using LS is the scroll’s fluidity. This feature allows for a soothing navigation style that’s almost cinematic, which plays a big role in user experience. For more experiential projects that seek to evoke emotions in website visitors, this smooth-scroll opens creative possibilities and becomes a flagship tool.

Advanced control over elements

Thanks to LS, it’s easy to trigger many things with the appearance of an HTML element in the viewport: parallax, entry/leave animation with or without delay, advanced animations relative to the scroll (possibly with GSAP), easing/lerp or just toggling actions on other parts of the website, etc… This advanced control heightens a project’s creative approaches, facilitates the front-end developer’s work, and gives a project life.

Control of the scroll

Adding to all of the above is an expanded control over the scroll’s behaviour. LS makes it possible to create a page with horizontal scrolling, and lets you stop and start a scroll at the borders of a section, for example. In addition to the smooth-scroll and its different parameters (easing/lerp) comes a scroll standardization across devices and different types of pointing devices (mouses, trackpads etc) so they all behave the same.

For more experiential projects that seek to evoke emotions in website visitors, this smooth-scroll opens creative possibilities.

Growing community

A growing number of monthly downloads comes with a community that’s becoming more involved and ready to help new LS users. If you don’t find what you’re looking for in the readme, our repository’s issues and pull request sections are swiftly becoming veritable mines of information. You’ll also find advice and forks from other users to implement the library with different frameworks (sadly, we can’t cover all the possibilities ourselves).

We warmly welcome all constructive comments and suggestions about the project! Please share your thoughts on the repository, we’re your biggest fans. It’s super gratifying to see so many people interested, thank you very much!

Since the heart of our profession is delivering websites to clients and we don’t have a dedicated LS maintenance team, we can’t promise regular updates, and partly rely on the library’s users to help resolve bugs. Between client projects, when we have time, we try to address issues, pull requests, and suggestions from our community to keep improving LS. (Don’t hesitate to contribute)!

Know your limits: When to use it?

With all these advantages must come certain constraints, which are good to understand to be sure the LS library is a good choice for your project.

First, this tool requires basic JavaScript knowledge, so it isn’t the ideal neophyte solution. In fact, it’s important to understand how the library functions overall, as a bad configuration could create rendering and performance issues.

Also, Locomotive Scroll could perturb user habits by limiting certain native accessibility functions, for example, the search function (CTRL/CMD + F) returns the number of results but can’t scroll in the page. Finally, some third-party plug-ins may not function correctly with LS (especially if they alter the DOM randomly or trigger scroll displacements)

To hijack or not to hijack?

Scroll hijacking is often considered a bad practice. It can shock or perturb user habits, be performance-greedy, and create accessibility concerns — making it important to decide early on whether (or not) to use LS in your project.

Simply, some projects are a better fit for LS than others, so the secret to success is to know when to use it:

For example, for an e-commerce site, we generally want to prioritize conversion, performance, and native browser experience. A more experiential site, such as an agency portfolio, could prioritize the “wow factor” and innovatively showcase the brand image through more advanced animations.

Equally relevant are a project’s audience and accessibility constraints. We always try to deliver the most accessible experiences possible, but some projects have tougher demands so really require using the native scroll.

That said… We love seeing people using Locomotive Scroll in their projects! Shout out to everyone who does, including Ray-Ban Stories by Luxottica Creative Team. Their site uses Locomotive Scroll in a cool way with an impressive horizontal browsing experience, as you can see:

A wonderful creative tool

We think it’s possible to use scroll hijacking the right way. It’s a wonderful tool that opens the door to more creative projects that push the limits of web experiences. We’re excited to keep developing Locomotive Scroll and sharing its evolution with our community!

Check it out here: https://github.com/locomotivemtl/locomotive-scroll

Originally published at https://locomotive.ca on January 12, 2022.