Installation
Install dependencies
npm install lenisIt's
recommended
to add following css so create a styles/lenis-smooth-scroll.css or add to
your global.css
styles/lenis-smooth-scroll.css or global.css
html.lenis,
html.lenis body {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: hidden;
}
.lenis.lenis-smooth iframe {
pointer-events: none;
}Initialize in your root layout or anywhere you want to use smooth scroll
app/layout.tsx
import Lenis from "lenis";
import "@/styles/lenis-scroll.css";
export default function RootLayout({ children }: RootLayoutProps) {
useEffect(() => {
const lenis = new Lenis();
function raf(time: number) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
}, []);
return (
<html lang="en" >
<body>
{children}
</body>
</html>
)
}