Lenis Scrolling in ReactJS and NextJs : Important Things to Understand.

Elevate Your User Experience with Silky Smooth Navigation.

Installation:

npm install @studio-freight/react-lenis

Basic Usage:

'use client'

import { ReactLenis } from '@studio-freight/react-lenis'
import { gsap } from 'gsap'
import { useEffect, useRef } from 'react'



const LenisScroll = ({children}) => {
  const lenisRef = useRef()
  useEffect(() => {
    function update(time) {
      lenisRef.current?.raf(time * 1500)
    }
  
    gsap.ticker.add(update)
    return () => {
      gsap.ticker.remove(update)
    }
  })
   


  const options = { 
    duration: 1.2,
    easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // https://www.desmos.com/calculator/brs54l4xou
    direction: 'vertical', // vertical, horizontal
    gestureDirection: 'vertical', // vertical, horizontal, both
    smooth: true,
    mouseMultiplier: 1,
    smoothTouch: false,
    touchMultiplier: 2,
    infinite: false,
  }
     
    
  return (
    
     {children}
    
  )
}

export default LenisScroll

import LenisScroll from "@/components/LenisScroll";
import React from "react";

const CommonLayout = () => {
  return (
    <>
      <LenisScroll>
        <MainHeader />
          <main>{children}</main>
        <Footer />
      </LenisScroll>
    </>
  );

export default CommonLayout;

How to stop and start lenis?

React Lenis offers the useLenis hook, enabling you to directly access and control Lenis functionality from any component in your app.

• Create a custom hook useToggleLenis
• import useLenis hook form ‘@studio-freight/react-lenis’

import { useLenis } from '@studio-freight/react-lenis'
import React from 'react'

export const useToggleLenis = () => {
const lenis = useLenis()

const lenisStart = () => {
    lenis?.start()
}

const lenisStop = () => {
    lenis?.stop()
}
  return {
    lenisStart,
    lenisStop
  }
}

How to use the custom hook inside your own component

• import useToggleLenis from ‘@/logic/useToggleLenis’
• Destructure lenisStart and lenisStop functions.
• lenisStart  will force the lenis scrolling.
• lenisStop will stop the page scrolling whenever you need.
• Create use effect hook and follow the code given below.

import { useToggleLenis } from '@/logic/useToggleLenis';
import { useEffect, useState } from 'react';

const Component = () => {
  const [show, setShow] = useState(false);

  const {lenisStart, lenisStop} = useToggleLenis()
  useEffect(() => {
    if (condition) {
      if (show) {
        lenisStop()
      }
      else{
        lenisStart()
      }
    }
    return () => {
      lenisStart()
    };
  }, [input]);
  return (
    <button onClick={() => setShow(true)}>{show ? 'Stoped' : 'Scrolling'}</button>
  )
}

export default Component

Supports various Lenis options for fine-tuning scrolling behavior

• offset: Equivalent to scroll-padding-top
• lerp: Animation lerp intensity
• duration: Animation duration
• easing: Animation easing function
• immediate: Ignore duration, easing, and lerp for instant scrolling
• lock: Prevent user scrolling until target is reached
• force: Reach target even if instance is stopped
• onComplete: Callback function when the target is reached

for more details please check https://www.npmjs.com/package/@studio-freight/react-lenis and https://github.com/studio-freight/lenis

Thank you for reading.