Our Smooth Scrolling Libraries.

Why use a scroll library?

Scroll libraries can be used for a bunch of reasons. The first and most basic one is a smooth scroll experience. This makes scrolling through a website feel smoother and takes aways the choppy feeling certain mice give when scrolling. Some browsers might also add their own smoothing effects on the page scroll. So if you want to make sure the scroll experience of your site is consistent across the board a scroll library might be what you’re looking for.

Another advantage of using a scroll library is the option to change the scroll behaviour and speed of certain elements compared to others. This makes adding subtle animations easy depending on which library you use.

We’re going to compare three libraries in this post:

• Locomotive scroll created by the Locomotive Agency.

• GSAP ScrollSmoother created by Greensock.

• Lenis Scroll created by Studio Freight.

Locomotive scroll

An important distinction between these different libraries is how they work. Locomotive Scroll works by creating a fixed container around the body and moving the body inside the container by transforming it’s position. Then it checks for every components with ‘data-scroll’ attributes and changes the scroll behaviour accordingly.

Thanks to the attributes you can change things like scroll speed, timing, direction, delay, .. Because of this it is easily customisable, but there are also a few things to keep in mind. Native scrolling is disabled, which means that when you scroll through the site you’re not actually scrolling. Your scroll action is tracked and the body inside the scroll container is moved with a css transform. This can mess up certain css styling, like sticky elements, and doesn’t always play nice with other animation libraries that need the position of your element, such as GSAP ScrollTrigger.

Some other things to keep in mind with locomotive scroll is that it is an open source project and the core package is 12.33KB. However if you want to use it inside a framework, like React, you might need some additional packages, in this case ‘react-locomotive-scroll’. Which can inflate the total size.

If you can get by with the build-in animation options this library is a great option, but if you’re looking for a library with more robust animation options the next one might be a better choice.

GSAP ScrollSmoother

One of the main issues with Locomotive-scroll is that it doesn’t play nice with other animation libraries. GSAP ScrollSmoother fixes this issue. GreenSock (GSAP) is a large library for creating animations on websites. Their ScrollSmoother is only a small part of what they have to offer. The other libraries include features like tweening, timelines, and a variety of easing functions.

This is a major advantage for the GSAP ScrollSmoother, because it works great with the entire GSAP animation collection. When it comes to scroll effects it also has a great deal of customisability and works in a similar way as locomotive-scroll: data-attributes. With these attributes you can control individual scroll-speed and scroll-lag, controlling the speed and delay.

As you can see the ScrollSmoother itself has a lot less animation options than the locomotive-scroll counterpart, but this is by design. All other animations can be easily tacked on with other GSAP libraries. This creates a very versatile tool with less compromises. It also uses the native scroll which means you’re not creating a fake scrollbar and you are actually scrolling through the page and not just transforming the page.

One of the things to keep in mind with this library, as well as all GreenSock libraries, is that it’s not open source and if you want to use this commercially you need a GreenSock License.

For as much issues ScrollSmoother fixes there are also a few things it doesn’t. Most notably the css sticky position, so out of the box it’s really hard to create a position sticky on an element. Luckily this can be resolved by using the other features GSAP has to offer, like the scrollTrigger plugin. Another downside you get with ScrollSmoother is that it is relatively large at 26.08KB if all you need is a basic smoothing effect.

So if you want an all out system which can handle most animations GSAP is what you’re looking for. However if your website doesn’t require a large foundation of animation options and all you’re looking for is a simple, lightweight library for a smoother scrolling experience Lenis Scroll might be a better option.

Lenis

Lenis is, similar to locomotive-scroll, open source and created by an agency. In this case that agency is Studio Freight. If you read the last two scroll library write-ups you might be thinking “Why do we need another scroll library?”. And the answer would be very simple. The earlier libraries have many things going for them, but if you want a simple, lightweight library without all the hassle of creating workarounds for css techniques like transform properties or sticky positioning you would be mistaken to choose them. That’s the gap that Lenis is filling.

Lenis is very small(2.13kb) and focusses on the scrolling and only the scrolling. Because of this focus it has some things as default options that the previous libraries don’t have, such as creating a custom easing on your scrolling and turning your page into an infinite scroll (sending you back to the top when you reach the bottom of the page).

All of this makes Lenis a very user-friendly library, but it’s main selling point is that is doesn’t interfere with anything. This makes it so that if later on in the project you decide to add some GSAP animations or other animation library, you know the page scrolling is not going to be an issue.

As you can see in the example, Lenis has a lot less options for customisation. However sometimes less is more. When you look at the html you’ll notice there are no data-attributes or anything added and the only things we added are the id’s to add the target our divs.

In conclusion, there are many different options for creating custom scroll animations on websites, and each of the libraries we discussed - Locomotive-scroll, GSAP SmoothScroller, and Lenis Scroll - have their own unique strengths and capabilities.

Locomotive-scroll is a powerful and flexible library that provides a wide range of customisation options, allowing developers to create complex and engaging scroll animations with ease. GSAP SmoothScroller is a flexible library that is optimised to work perfectly in the GSAP animation environment, making it ideal for creating complex animations even on low-end devices. Lenis Scroll, on the other hand, is a simple and lightweight library that provides a user-friendly way to create custom scroll animations, without sacrificing performance or functionality.

Ultimately, the choice between these libraries will depend on the specific needs of your project. If you are looking for a flexible and customisable solution, Locomotive-scroll might be the best choice. If animation is your top priority, GSAP SmoothScroller is the way to go. And if you are looking for a simple and user-friendly solution, Lenis Scroll is the perfect choice.

Whichever library you choose, the important thing is to select the one that best meets your needs and helps you create the custom scroll animations that you envision for your website. So, whether you are a seasoned web developer or just getting started, give one of these libraries a try and see the magic of custom scroll animations come to life!