Achieve smooth scrolling in React, Easy plugin

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

Smooth Scrolling : Navigating the Challenges

Comments

Build with Hariprasad

Creating a hover triggered text weight animation in Next Js / React - with source code

More from this blog

Creating a hover triggered text weight animation in Next Js / React - with source code

Design System 101 - Everything about it

Design Principles

What is Design?

Introduction:

Why Smooth Scrolling Matters:

Challenges in Achieving Smooth Scroll:

Usage:

Command Palette

Comments

Build with Hariprasad

Creating a hover triggered text weight animation in Next Js / React - with source code

More from this blog

Introduction:

Why Smooth Scrolling Matters:

Challenges in Achieving Smooth Scroll:

Usage: