implement_lenis_scroll

Lenis によるスムーズスクロールの実装

このスキルでは、@studio-freight/lenis（または新しい lenis パッケージ）を使用して、React／Next.js アプリケーションに滑らかなスクロールを追加する方法を説明します。

前提条件

• React または Next.js のプロジェクト。

手順

1. 依存関係をインストールする

Lenis パッケージをインストールします。

npm install lenis
# OR depending on version preference
npm install @studio-freight/lenis

2. Lenis のフック／コンポーネントを作成する

Lenis は再利用可能なコンポーネントまたはフックにカプセル化するのがおすすめです。

オプション A：グローバルコンポーネント（Next.js App Router におすすめ） src/lib/lenis.ts または 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}</>
}

3. レイアウトに統合する

メインアプリケーションまたはレイアウトのコンテンツをコンポーネントでラップします。

Next.js App Router（layout.tsx）：

import SmoothScroll from '@/components/SmoothScroll'

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

ベストプラクティス

• パフォーマンス：requestAnimationFrame が最適化されていることを確認してください。
• スクロール位置の復元：通常、Lenis が処理しますが、Next.js で scrollRestoration が想定どおりに機能することを確認してください。
• GSAP との統合：ScrollTrigger を使用する場合は、Lenis のスクロール時に ScrollTrigger を更新してください。

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