Skill Gallery
← スキル一覧に戻る
jerrar670

implement-lenis-scroll

by jerrar670

Modern surf website project

⭐ 0🍴 0📅 2026年1月20日
GitHubで見るManusで実行

SKILL.md

name: implement_lenis_scroll description: Instructions for implementing Lenis smooth scrolling in a Next.js or React application.

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

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

3. 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>
        <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. 
    // Inside useEffect
// lenis.on('scroll', ScrollTrigger.update)
// gsap.ticker.add((time)=>{lenis.raf(time * 1000)})
// gsap.ticker.lagSmoothing(0)

スコア

総合スコア

50/100

リポジトリの品質指標に基づく評価

✓SKILL.md

SKILL.mdファイルが含まれている

+20
○LICENSE

ライセンスが設定されている

0/10
○説明文

100文字以上の説明がある

0/10
○人気

GitHub Stars 100以上

0/15
○最近の活動

3ヶ月以内に更新がある

0/10
○フォーク

10回以上フォークされている

0/5
✓Issue管理

オープンIssueが50未満

+5
✓言語

プログラミング言語が設定されている

+5
○タグ

1つ以上のタグが設定されている

0/5

レビュー

💬

レビュー機能は近日公開予定です