Smooth Scroll – The Setup for Beginners
What is a smooth scroll?
In the vast landscape of web design, one of the subtle yet impactful features that often goes unnoticed is smooth scrolling. Imagine navigating a website where every scroll is fluid and seamless, without any abrupt jumps or jerky movements. The smooth scroll is the magic behind this polished experience, providing users with a visually pleasing journey through different sections of a webpage. In this post, we’ll delve into the world of smooth scrolling on websites, exploring its definition with real-world examples.
When searching for the “smooth scroll” keyword on Google, the results usually refer to scrolling to the anchor element on the link click. In that case, we can easily “enable” smooth scrolling by adding a “scroll-behavior” CSS property to the <html> element with a value “smooth”.
html {
scroll-behavior: smooth;
}
If you want to have more control over this type of smooth scrolling, like changing the duration, ease, speed, etc., you can use vanilla JS with window.scrollTo() method and behavior: 'smooth' option, or JS libraries like GSAP (ScrollTo plugin) or jQuery (.animate() function with scrollTop property). But here, we are writing about something else.
In this case, when we say “smooth scroll”, we mean the scrolling that happens while we drag the mouse wheel up or down, or in other words, scrolling.
While writing this blog post, there was no CSS solution for smooth scrolling (at least the one we knew about), so we depended on the JS libraries. You can try creating your solution, but we do not recommend it because why would you want to reinvent the wheel (unless that wheel is squared)?
There are a few popular smooth-scrolling JS libraries and custom solutions, but we will write about the ones we used, and those are:
Smooth Scrollbar by idiotWu
Smooth Scrollbar by idiotWu is a custom scrollbar library for web applications. It enhances the default browser scrollbar with smooth scrolling behavior and customizable design options. Smooth Scrollbar provides a wide range of options for customizing the scrollbar’s appearance and behavior. These include options for scrollbar size, track color, handle color, easing functions, wheel speed, and more. You can tailor these settings to fit the design and functionality of your application.
The library also provides event handlers for various scrollbar-related interactions. These events allow you to hook into the scrollbar’s behavior and respond to user actions such as scrolling, dragging the scrollbar handle, or clicking on the track. Smooth Scrollbar features a plugin system that enables you to extend its functionality further. You can create custom plugins to add additional features or modify existing behavior as per your requirements. Smooth Scrollbar is designed to integrate seamlessly with various JavaScript frameworks and libraries such as React, Vue.js, and Angular. This allows you to incorporate custom scrollbars into your web applications regardless of the technology stack you’re using.
The library is optimized for performance, ensuring smooth scrolling even on pages with large amounts of content or complex layouts. It achieves this by leveraging hardware acceleration where possible and employing efficient rendering techniques.
Pros:
- Smooth Scrolling: Provides a smooth scrolling experience for users, enhancing navigation within web pages.
- Customization: Offers extensive customization options for the scrollbar’s appearance and behavior, allowing developers to tailor it to match the design of their website or application.
- Lightweight: The library is lightweight and optimized for performance, ensuring minimal impact on page load times and smooth scrolling even on pages with large amounts of content.
- Plugin System: This version features a plugin system that enables developers to extend its functionality further, allowing for the integration of additional features or modifications as needed.
- Compatibility: Compatible with various JavaScript frameworks and libraries, making it versatile and easy to integrate into existing projects regardless of the technology stack being used.
- Active Development: The developer community actively maintains and updates the library, ensuring ongoing support and incorporating new features and improvements.
Cons:
- Limited Feature Set: While Smooth Scrollbar excels at customizing scrollbars, it may lack some advanced scroll effects and animations from other libraries like Locomotive Scroll.
- Learning Curve: While the library is relatively straightforward to use, developers may need to spend some time familiarizing themselves with its API and customization options to leverage its capabilities fully.
- Browser Compatibility: Although Smooth Scrollbar works well across modern web browsers, there may be some compatibility issues or inconsistencies with older browsers that do not support certain CSS or JavaScript features.
- Mobile devices: Smooth Scrollbar does not automatically recognize mobile devices and needs custom coding to disable itself on mobile devices if you want to use native scrolling.
Locomotive Scroll
Locomotive Scroll is a JavaScript library designed to provide smooth and performant scroll animations and effects. Locomotive Scroll offers various configuration options to customize its behavior according to your needs. This includes options for scroll direction, scroll speed, smoothness settings, and more. You can adjust these settings to achieve the desired scroll effects and animations.
Locomotive Scroll allows you to define which elements on your page should be animated. You can specify these elements using CSS selectors, such as class names or IDs, or by using JavaScript to target specific elements programmatically. One of the key features of Locomotive Scroll is its ability to trigger animations based on the user’s scroll position. You can define animations to occur when an element enters or exits the viewport, when the user scrolls to a specific position, or when certain scroll thresholds are reached. Locomotive Scroll supports various easing functions to control the acceleration and deceleration of scroll animations. These easing functions can be customized to achieve different visual effects, such as smooth transitions or more dramatic acceleration.
Locomotive Scroll is optimized for performance to ensure smooth and fluid animations even on devices with limited processing power. It leverages hardware acceleration where possible and employs efficient rendering techniques to minimize jank and stutter during scrolling. The library provides event handlers that allow you to hook into various scroll-related events, such as when the user scrolls or when scroll animations are triggered. This enables you to add custom behavior or respond to user interactions as needed.
Pros:
- Rich Scroll Effects: Locomotive Scroll offers a wide range of scroll-related effects and animations, including parallax scrolling, scroll snapping, scroll-triggered animations, and more. This allows developers to create visually engaging and interactive web experiences.
- Customization: While primarily focused on scroll effects, Locomotive Scroll provides customization options for adjusting the behavior and appearance of its scroll effects. Developers can fine-tune these effects to suit the design and branding of their websites or applications.
- Feature-rich: Locomotive Scroll is feature-rich and offers a comprehensive set of scroll-related functionalities out of the box. This reduces the need for developers to rely on multiple libraries or custom solutions to achieve desired scroll behaviors.
- Dependencies: Locomotive Scroll may have dependencies on other libraries or frameworks, such as GSAP (GreenSock Animation Platform), which provides advanced animation capabilities. While this may increase initial setup complexity, it also allows for leveraging powerful animation features.
- Mobile devices: Locomotive Scroll automatically recognizes mobile devices and uses the device’s native scroll.
Cons:
- Learning Curve: Due to its extensive feature set and customization options, Locomotive Scroll may have a steeper learning curve compared to simpler scroll libraries. Developers may need to invest time in understanding its API and configuration options to use it effectively.
- Performance Considerations: While Locomotive Scroll is optimized for performance, complex scroll effects and animations may introduce performance overhead, especially on devices with limited processing power or older web browsers. Careful optimization may be necessary to ensure smooth performance across a wide range of devices.
- Browser Compatibility: Some scroll effects and animations may rely on modern CSS and JavaScript features that are not fully supported in older web browsers. Developers may need to implement fallbacks or alternative solutions for users on unsupported browsers.
- Dependency Management: Locomotive Scroll relies on external dependencies such as GSAP and potentially others. Managing these dependencies and ensuring compatibility with other libraries or frameworks used in the project can add complexity to the development process.
- Overkill for Simple Projects: For projects that do not require advanced scroll effects or animations, using Locomotive Scroll may be overkill and introduce unnecessary complexity. Simpler scroll libraries like Smooth Scrollbar may be more suitable in such cases.
Difference between Smooth Scrollbar and Locomotive Scroll
Both Smooth Scrollbar and Locomotive Scroll work on a similar principle: translating the DOM elements. Smooth Scrollbar utilizes CSS transformations to manipulate the scrolling container. Applying CSS transform to the content inside the scrolling container allows Smooth Scrollbar to smoothly transition between different scroll positions. Locomotive Scroll: Similarly, Locomotive Scroll applies CSS transformations to the scrolling container to create smooth scroll animations. It may use CSS transform to move the content vertically or horizontally, creating the illusion of scrolling.
Even though they work in a similar way, these libraries are very different. Here are the main differences:
- Functionality:
- Smooth Scrollbar: It primarily focuses on customizing the browser’s scrollbar to provide smooth scrolling behavior and enhanced design options. It offers a lightweight solution for improving the scrolling experience.
- Locomotive Scroll: Locomotive Scroll is a full-featured scroll animation library that offers a variety of scrolling effects, such as parallax scrolling, scroll snapping, and scroll-triggered animations. It’s more comprehensive in terms of scroll-related effects and animations.
- Customization:
- Smooth Scrollbar: It offers extensive customization options for the appearance and behavior of the scrollbar itself, including options for scrollbar size, color, easing functions, etc.
- Locomotive Scroll: While Locomotive Scroll provides some customization options, it focuses more on delivering pre-built scroll effects and animations rather than customizing the scrollbar directly.
- Plugin Ecosystem:
- Smooth Scrollbar: Its plugin system allows developers to extend its functionality by creating custom plugins. This enables additional features to be integrated into the scrollbar as needed.
- Locomotive Scroll: Locomotive Scroll does not have a plugin system. Instead, it provides a set of built-in features and effects that can be used out of the box.
- Dependencies:
- Smooth Scrollbar: It has minimal dependencies and can be used independently in web projects.
- Locomotive Scroll: Depending on the specific features and effects being used, it may depend on other libraries or frameworks. For example, it might rely on GSAP (GreenSock Animation Platform) for animation-related functionality.
In summary, Smooth Scrollbar by idiotWu primarily focuses on customizing the browser scrollbar for smooth scrolling, while Locomotive Scroll offers a broader range of scroll-related effects and animations. The choice between the two would depend on your project’s specific needs and requirements.
Lenis
Lenis is a JavaScript library for creating smooth scrolling effects on web pages. It is designed to be lightweight and minimalistic, offering a simple and efficient solution for implementing smooth scrolling effects without unnecessary bloat. Lenis offers basic customization options to configure the scrolling behavior according to your needs. You can adjust parameters such as scroll duration, easing function, and offset to fine-tune the smooth scrolling effects.
Lenis automatically handles hash-based navigation by smoothly scrolling to the target element associated with the clicked hash link. This provides a seamless user experience when navigating on the same page. Lenis provides event hooks allowing you to execute custom code before and after scrolling. This enables you to perform additional actions or animations in response to scroll events. Lenis strives to maintain accessibility standards by ensuring that smooth scrolling effects remain navigable and usable for all users. It ensures that scrollable content remains accessible via keyboard navigation and assistive technologies.
Lenis is compatible with modern web browsers and offers support for both desktop and mobile devices. It leverages standard web technologies like CSS and JavaScript to achieve broad compatibility. Lenis provides a lightweight and straightforward solution for implementing smooth scrolling effects on web pages. Its minimalistic approach and basic customization options offer a hassle-free way to enhance the user experience with smooth and fluid navigation within web content.
Pros:
- Lightweight: Lenis is designed to be lightweight and minimalistic, resulting in a small footprint and fast loading times for web pages.
- Ease of Use: Lenis offers a simple and straightforward API, making it easy to implement smooth scrolling effects with minimal configuration.
- Basic Customization: While minimalistic, Lenis provides basic customization options such as scroll duration, easing function, and offset, allowing developers to tailor the scrolling behavior to their needs.
- Hash Navigation: Lenis automatically handles hash-based navigation, providing a seamless user experience when navigating within the same page.
- Accessibility: Lenis strives to maintain accessibility standards, ensuring smooth scrolling effects remain navigable and usable for all users, including those relying on assistive technologies.
- Event Handling: Lenis offers event hooks for executing custom code before and after scrolling occurs, enabling developers to add additional actions or animations in response to scroll events.
- Browser Compatibility: Lenis is compatible with modern web browsers, ensuring broad compatibility across different platforms and devices.
- Mobile devices: Locomotive Scroll automatically recognizes mobile devices and uses the device’s native scroll.
Cons:
- Limited Customization: Compared to more feature-rich, smooth-scrolling libraries, Lenis offers basic customization options. Developers may find its customization options limited for advanced use cases.
When compared with the other two libraries, Lenis is specific because it does not use CSS translation, but somehow, it enables smooth scrolling in the native browser scrollbar. That means that most functionalities regarding native scrolling should work with Lenis, too.
For example, this code will not work with Locomotive Scroll or Smooth Scrollbar but will work with Lenis:
window.scrollTo({
top: 0,
behavior: 'smooth'
});
That’s why we prefer Lenis. But still, should you use any of these libraries?
Conclusion
Imagine you have a web store where your main goal is to attract users to buy something. Will the smooth-scrolling effect attract more users to your website? Maybe, but it will not affect the users’ purchase decisions. So, the only time we would use smooth-scrolling is on personal portfolios where you want to have that “WOW” effect and when you want scroll-based animations to be more fluid and smooth. Or if you are an agency that wants to attract more users to its website (just like we did with this website).
But still, should smooth scrolling be something that the developer turns on and off for the specific website or something that any website can have based on the user’s preference (like an option in a browser, even though mobile browsers have native smooth scroll) or the device that the user is using (the Magic Mouse or Mac’s touchpad)? For example, Logitech’s Logi Options+ app allows users to select whether their mouse wheel has smooth scrolling, but it is not as good as these smooth-scrolling JS libraries.
On the other hand, as a developer, you believe your website would look buggy without smooth scrolling, so you want to “force” it.
Here is a simple setup for each JS library mentioned so you can test them and decide whether you should use smooth scrolling and, if so, which one: Smooth Scrollbar, Locomotive Scroll, and Lenis.
Read more about website development here. If you are an advanced developer, try combining Barba.js and smooth scrolling. After that, you’ll have a website worth publishing on Awwwards.com. 😉
