Smoooooth Scroll

Smooth scrolling has became a key component of modern web design enhancing user experience by providing immersive transitions. In this blog we will explore React Lenis, a lightweight, robust, and performant elegant scroll library designed to bring a smooth scrolling experience.

Installing React Lenis

Lets get started by installing React lenis in the Next.JS project.

You can do similarly with React.JS:

bash

npm i @studio-freight/react-lenis

Here is my folder structure for the project:

text

lenis-scroll/
├── src/
│   ├── app/
│   │   ├── providers/
│   │   │   └── lenis-provider.tsx
│   │   ├── layout.tsx
│   │   └── page.tsx
├── package.json
└── ... (other files)

Here, lenis-provider.tsx is a file serving as a component that wraps child elements with the ReactLenis component from the react-lenis package.

Within the ReactLenis component, various options can be customized such as lerp which controls the interpolation for smoothness, duration which defines how long a scroll should take and smoothWheel allowing a smooth scroll effect.

You can check out the documentation and experiment with the available options.

tsx

// lenis-provider.tsx
"use client";
import { ReactLenis } from "@studio-freight/react-lenis";
import { FC, useRef } from "react";

type LenisScrollProviderProps = {
  children: React.ReactNode;
};
const LenisScrollProvider: FC<LenisScrollProviderProps> = ({ children }) => {
  const lenisRef = useRef(null);
  return <ReactLenis ref={lenisRef} root options={{ lerp: 0.1, duration: 1.5, smoothWheel: true }}>{children}</ReactLenis>;
};

export default LenisScrollProvider;

In layout.tsx, you need to wrap the children with the LenisScrollProvider that was created earlier. This ensures that all pages will benefit from the smooth scrolling functionality provided by lenis.

tsx

// layout.tsx
import type { Metadata } from "next";
import LenisScrollProvider from "./providers/lenis-provider";
import "./globals.css";

export const metadata: Metadata = {
  title: "Lenis Scroll",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <LenisScrollProvider>{children}</LenisScrollProvider>
      </body>
    </html>
  );
}

Finally in page.tsx, I’ve used Tailwind CSS for the styling. You can choose your preferred styling framework or CSS itself.

tsx

// page.tsx
export default function Page() {
  return (
    <main className="flex flex-col ">
      <Section1 />
      <Section2 />
    </main>
  );
}

function Section1() {
  return (
    <section className="h-screen w-full container mx-auto flex flex-col items-center justify-center py-10 px-4 sm:px-6 lg:px-8">
      <h1>Section 1</h1>
    </section>
  );
}
function Section2() {
  return (
    <section className="h-screen w-full container mx-auto flex flex-col items-center justify-center py-10 px-4 sm:px-6 lg:px-8">
      <h1>Section 2</h1>
    </section>
  );
}

Now start your development server by running the following command:

bash

npm run dev

Conclusion

With these steps, you have successfully integrated React Lenis into your Next.js application for elegant scrolling. Enjoy the smoother transitions and enhanced user experience.

Happy coding!

Smoooooth ScrollSmoooooth Scroll

Installing React Lenis

Conclusion