【next.js】×【lenis】で慣性スクロールをお手軽実装

リッチなサイトには慣性スクロールが採用されていることが多いですよね。
lenisというライブラリを使用すると簡単に実装することができるので
今回はそれの実装手順を解説していきます

インストール

まずは、下記のコマンドで lenis をインストールします。

npm i @studio-freight/lenis

LenisProvider コンポーネントの作成

次に、慣性スクロールを実装するためのコンポーネントを作成します。
今回は、LenisProvider.ts というファイルに以下のコードを記述してください。

'use client'

import { useEffect } from 'react'
import Lenis from '@studio-freight/lenis'

export const LenisProvider = () => {
  useEffect(() => {
    const lenis = new Lenis({
      duration: 1.2,
      easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
      wheelMultiplier: 1,
      touchMultiplier: 1,
      infinite: false,
    })

    const raf = (time: number) => {
      lenis.raf(time)
      requestAnimationFrame(raf)
    }

    requestAnimationFrame(raf)

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

  return null
}

各プロパティの解説

• duration
  スクロールのアニメーションにかかる時間（秒単位）を設定します。
  例では 1.2 秒となっており、スクロールの動きが1.2秒間続きます。

• easing
  スクロール時の動き（加速・減速）を制御するイージング関数を設定します。
  例として用意されている (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)) は、自然な加速と減速を実現するためのカスタム関数です。

• wheelMultiplier
  マウスホイールでのスクロール速度を調整する倍率です。
  値を大きくするとホイール操作によるスクロールが速くなり、逆に小さくすると遅くなります。
  例では 1 に設定されているため、デフォルトのスクロール速度が維持されます。

• touchMultiplier
  タッチ操作によるスクロール速度を調整する倍率です。
  同様に、値を変更することでタッチスクロールの感度が変化します。
  例では 1 に設定されています。

• infinite
  無限スクロール（スクロールがループするかどうか）を有効にするかを決定します。
  false の場合は、スクロールはページの範囲内に留まり、無限にループしません。

利用方法

実装したいページで LenisProvider を import し、コンポーネントとして配置するだけで、慣性スクロールが実現できます。
例えば、以下のように使用します。

import { LenisProvider } from './LenisProvider'

const App = () => (
  <>
    <LenisProvider />
    {/* その他のコンポーネントやコード */}
  </>
)

export default App

まとめ

この手順で、簡単にリッチなサイトに慣性スクロールを実装することができます。
lenis の設定はプロジェクトのニーズに合わせて調整可能なので、ぜひ試してみてください！