Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to Implement Smooth Scroll using lenis scroll In Nextjs/React Poject

I’ve been trying to implement smooth scrolling in my Next.js application using the new App Router using the lenis scroll package, but I’m having challenges making it work

Here’s what I’m trying to do:

Enable smooth scrolling on my home page I am using Next.js 14 with the new App Router.

I tried this code ‘use client’;

import Lenis from '@studio-freight/lenis';
import Hero from '@/components/Hero';
import SecondSection from '@/components/sections/second/SecondSection';
import ThirdSection from '@/components/sections/ThirdSection';
import FourthSection from '@/components/sections/FourthSection';
import FifthSection from '@/components/sections/FifthSection';
import SixthSection from '@/components/sections/SixthSection';
import SeventhSection from '@/components/sections/SeventhSection';
import SliderComponent from '@/components/slider/slider';
import EighthSection from '@/components/sections/EighthSection';
import Packages from '@/components/sections/Packages';
import HorizontalScroll from '@/components/HorizontalScroll';
import FinestExperience from '@/components/sections/FinestExperience';
import TenthSection from '@/components/sections/TenthSection';
import GreatAdventure from '@/components/sections/GreatAdventure';
import './globals.css';

function Home() {
  const lenisRef = useRef(null);

  useEffect(() => {
    const lenis = new Lenis({
      duration: 1.2,
      easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
    });

    lenisRef.current = lenis;

    function raf(time) {
      lenis.raf(time);
      requestAnimationFrame(raf);
    }
    requestAnimationFrame(raf);

    return () => {
      lenis.destroy();
    };
  }, []);

  return (
    <div ref={lenisRef} className="smooth-scroll">
      <main className="flex min-h-screen flex-col">
        <Hero />
        <SecondSection />
        <GreatAdventure />
        <ThirdSection />
        <FourthSection />
        <FifthSection />
        <SixthSection />
        <HorizontalScroll />
        <Packages />
        <SeventhSection />
        <EighthSection />
        <FinestExperience />
        <TenthSection />
      </main>
    </div>
  );
}

export default Home;```


[![my code snippet](https://i.sstatic.net/yZYqFc0w.png)](https://i.sstatic.net/yZYqFc0w.png)
Tags:

2

Answers


  1. 0

    use lenis for react NPM
    package name is @studio-freight/react-lenis

    to use it you have to create a new component, name what ever you want.

    "use client";
import React, { PropsWithChildren } from "react";
import { ReactLenis } from "@studio-freight/react-lenis";

const Lenis = ({ children }: PropsWithChildren) => {
  return (
    <ReactLenis options={{ duration: 2 }} root>
      {children}
    </ReactLenis>
  );
};

export default Lenis;

    and change your page to something like this

    import Hero from '@/components/Hero';
import SecondSection from '@/components/sections/second/SecondSection';
import ThirdSection from '@/components/sections/ThirdSection';
import FourthSection from '@/components/sections/FourthSection';
import FifthSection from '@/components/sections/FifthSection';
import SixthSection from '@/components/sections/SixthSection';
import SeventhSection from '@/components/sections/SeventhSection';
import SliderComponent from '@/components/slider/slider';
import EighthSection from '@/components/sections/EighthSection';
import Packages from '@/components/sections/Packages';
import HorizontalScroll from '@/components/HorizontalScroll';
import FinestExperience from '@/components/sections/FinestExperience';
import TenthSection from '@/components/sections/TenthSection';
import GreatAdventure from '@/components/sections/GreatAdventure';
import './globals.css';

function Home() {
  return (
      <Lenis>
        <div ref={lenisRef} className="smooth-scroll">
          <main className="flex min-h-screen flex-col">
            <Hero/>
            <SecondSection/>
            <GreatAdventure/>
            <ThirdSection/>
            <FourthSection/>
            <FifthSection/>
            <SixthSection/>
            <HorizontalScroll/>
            <Packages/>
            <SeventhSection/>
            <EighthSection/>
            <FinestExperience/>
            <TenthSection/>
          </main>
        </div>
      </Lenis>
  );
}

export default Home;
    Login or Signup to reply.
  2. 0

    @NullEe doesnt this make every child component also "use client", sry im new to nextjs

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search