Smooth scrolling has become 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 scroll library designed to bring a smooth scrolling experience.
Installing React Lenis
Let's get started by installing React Lenis in the Next.js project.
You can do similarly with React.JS:
npm i @studio-freight/react-lenis
Here is my folder structure for the project:
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.
// 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.
// 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.
// 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:
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!
