Implement Lenis Smooth Scroll

This skill guides you through adding buttery smooth scrolling to a React/Next.js application using @studio-freight/lenis (or the newer lenis package).

Prerequisites A React or Next.js project. Steps 1. Install Dependencies

Install the Lenis package.

npm install lenis

OR depending on version preference

npm install @studio-freight/lenis

Create the Lenis Hook/Component

It's best to encapsulate Lenis in a reusable component or hook.

Option A: Global Component (Recommended for Next.js App Router) Create src/lib/lenis.ts or src/components/SmoothScroll.tsx.

// src/components/SmoothScroll.tsx 'use client'

import { ReactNode, useEffect } from 'react' import Lenis from 'lenis'

export default function SmoothScroll({ children }: { children: ReactNode }) { useEffect(() => { const lenis = new Lenis({ duration: 1.2, easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), orientation: 'vertical', gestureOrientation: 'vertical', smoothWheel: true, })

function raf(time: number) {
  lenis.raf(time)
  requestAnimationFrame(raf)
}

requestAnimationFrame(raf)

return () => {
  lenis.destroy()
}

}, [])

return <>{children}</> }

Integrate into Layout

Wrap your main application or layout content with the component.

Next.js App Router (layout.tsx):

import SmoothScroll from '@/components/SmoothScroll'

export default function RootLayout({ children }) { return ( <html lang="en"> <body> {children} </body> </html> ) }

Best Practices Performance: Ensure requestAnimationFrame is optimized. Scroll Restoration: Lenis usually handles this, but verify scrollRestoration works as expected in Next.js. GSAP Integration: If using ScrollTrigger, ensure you update ScrollTrigger on Lenis scroll. // Inside useEffect // lenis.on('scroll', ScrollTrigger.update) // gsap.ticker.add((time)=>{lenis.raf(time * 1000)}) // gsap.ticker.lagSmoothing(0)

implement_lenis_scroll

安装

OR depending on version preference