🙆‍♀️

【GSAP】GSAP Practice【#２２ GSAP Nextjs React Lenis Setup】

2025/02/08に公開

Next.js

GSAP

lenis

tech

【#２２ GSAP Nextjs React Lenis Setup】

YouTube: https://youtu.be/ecu-H-n4G9I
https://youtu.be/ecu-H-n4G9I

今回は「lenis/react」の「ReactLenis」コンポーネントを使用して
Nextjsにlenisを実装する方法について解説します。

まずは、「ReactLenis」用のプロバイダーを作成します。

providers/react-lenis-provider.tsx
'use client'

import gsap from 'gsap'
import { LenisRef, ReactLenis } from 'lenis/react'
import { useEffect, useRef } from 'react'

interface ReactLenisProviderProps {
  children: React.ReactNode
}

export const ReactLenisProvider = ({ children }: ReactLenisProviderProps) => {
  const lenisRef = useRef<LenisRef | null>(null)

  useEffect(() => {
    function update(time: number) {
      lenisRef.current?.lenis?.raf(time * 1000)
    }

    gsap.ticker.add(update)

    return () => gsap.ticker.remove(update)
  }, [])

  return (
    <ReactLenis root options={{ autoRaf: false }} ref={lenisRef}>
      {children}
    </ReactLenis>
  )
}

次にプロバイダーを「layout.tsx」に設定します。

app/layout.tsx
import type { Metadata } from 'next'
import { Geist, Geist_Mono } from 'next/font/google'

// import { LenisProvider } from '@/providers/lenis-provider'
import { ReactLenisProvider } from '@/providers/react-lenis-provider'

import './globals.css'

const geistSans = Geist({
  variable: '--font-geist-sans',
  subsets: ['latin'],
})

const geistMono = Geist_Mono({
  variable: '--font-geist-mono',
  subsets: ['latin'],
})

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {/* <LenisProvider>{children}</LenisProvider> */}
        <ReactLenisProvider>{children}</ReactLenisProvider>
      </body>
    </html>
  )
}

Discussion

ログインするとコメントできます