implement_lenis_scroll

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implement Lenis Smooth Scroll

实现Lenis平滑滚动

This skill guides you through adding buttery smooth scrolling to a React/Next.js application using

@studio-freight/lenis

(or the newer

lenis

package).

本指南将引导你使用

@studio-freight/lenis

（或更新的

lenis

包）在React/Next.js应用中添加丝滑的滚动效果。

Prerequisites

前提条件

A React or Next.js project.

一个React或Next.js项目。

Steps

步骤

1. Install Dependencies

1. 安装依赖

Install the Lenis package.

bash

npm install lenis

安装Lenis包。

bash

npm install lenis

OR depending on version preference

npm install @studio-freight/lenis

undefined

npm install @studio-freight/lenis

undefined

2. Create the Lenis Hook/Component

2. 创建Lenis钩子/组件

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

src/components/SmoothScroll.tsx

typescript

// 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}</>
}

最好将Lenis封装在可复用的组件或钩子中。

选项A：全局组件（推荐用于Next.js App Router） 创建

src/lib/lenis.ts

或

src/components/SmoothScroll.tsx

。

typescript

// 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}</>
}

3. Integrate into Layout

3. 集成到布局中

Wrap your main application or layout content with the component.

Next.js App Router (
layout.tsx
):

typescript

import SmoothScroll from '@/components/SmoothScroll'

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

将主应用或布局内容用该组件包裹。

Next.js App Router（
layout.tsx
）：

typescript

import SmoothScroll from '@/components/SmoothScroll'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <SmoothScroll>
          {children}
        </SmoothScroll>
      </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.

typescript

// Inside useEffect
// lenis.on('scroll', ScrollTrigger.update)
// gsap.ticker.add((time)=>{lenis.raf(time * 1000)})
// gsap.ticker.lagSmoothing(0)

性能：确保
```
requestAnimationFrame
```
已优化。
滚动恢复：Lenis通常会处理此问题，但需验证Next.js中的
```
scrollRestoration
```
是否按预期工作。

GSAP集成：如果使用ScrollTrigger，请确保在Lenis滚动时更新ScrollTrigger。

typescript

// Inside useEffect
// lenis.on('scroll', ScrollTrigger.update)
// gsap.ticker.add((time)=>{lenis.raf(time * 1000)})
// gsap.ticker.lagSmoothing(0)