Smooth Scrolling : Navigating the Challenges
Here I've shared the most easy & straight forward method to achieve Smooth Scrolling in React / Next Js applications (with source code)
Introduction:
Smooth scrolling, the eye-pleasing navigation feature, transforms user experience. However, its implementation is no cakewalk. Let's demystify the complexities and provide a clear guide for achieving seamless scrolling on your website.
Why Smooth Scrolling Matters:
Beyond visual appeal, smooth scrolling enhances user engagement. Its absence of abrupt transitions creates a more enjoyable experience, impacting user satisfaction positively.
Challenges in Achieving Smooth Scroll:
Cross-browser compatibility, performance issues, glitches, and synchronized animations pose challenges in crafting the perfect smooth scroll experience, especially while using Next Js
Usage:
if
you're a Next Js person, use this in your layout.jsx
file with necessary adjustments like adding "use client" etc.
else if
you are a React person use it in your App.js
import Lenis from "@studio-freight/lenis";
function App(){
useEffect(() => {
// Create a Lenis instance, a library for smooth scrolling effects.
const lenis = new Lenis({
duration: 1.5,
// Fine-tune the smoothness of the animation, values closer to 0 will be dead smooth.
lerp: 0.05,
// Define the easing function for a natural acceleration and deceleration.
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
// Choose the scrolling direction (vertical or horizontal).
direction: "vertical",
// Set the allowed gesture direction for scrolling (vertical, horizontal, or both).
gestureDirection: "vertical",
// Enable smooth scrolling.
smooth: true,
// Disable smooth scrolling on touch devices.
smoothTouch: false,
// Adjust the sensitivity of touch-based scrolling.
touchMultiplier: 2,
});
// Create a requestAnimationFrame loop to continuously update the Lenis instance.
function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}
// Start the requestAnimationFrame loop.
requestAnimationFrame(raf);
}, []);
return(
<div>
<h1>Finally! Smooth scroll</h1>
<p>Thanks to <strong>@studio-freight</strong> for this amazing plugin</p>
</div>
);
}
Thanks for visiting this blog, Feel free to reach me for creating Modern Interactive Web development projects, Visit my portfolio - Hariprasad and my Design agency