darkroomengineering/lenis

これは何？

主な機能

• 01実行時の依存関係がなく、バンドルサイズも小さい
• 021つのインスタンスで、縦・横・入れ子のスクロールを滑らかに処理
• 03position: stickyやアンカーリンクなど、ネイティブのスクロール動作を維持
• 04WebGLのシーン、GSAP ScrollTrigger、パララックス効果と同期
• 05React、Vue、Framer向けの公式パッケージとsnapプラグインを提供

ユースケース

• マーケティングサイトやポートフォリオサイトにスムーススクロールを追加する
• Three.jsやWebGLのシーンをページスクロールに同期させる
• GSAP ScrollTriggerでスクロール連動アニメーションを作成する
• モーダルや入れ子のパネル内にスムーススクロールする領域を作る

クイックスタート

1. 1

   npmでLenisをインストールする

   npm i lenis
2. 2

   コードにLenisをインポートする

   import Lenis from 'lenis'
3. 3

   autoRafを有効にしてインスタンスを作成する

使う前に知っておきたいこと

• !autoRafまたはノーコード設定を使わない場合は、Lenisを独自のスクロール処理とアニメーションループに組み込む必要があります。

トピック

よくある質問

lenis とは？

ネイティブスクロールをイージング付きのアニメーションで包み込む、軽量で依存関係のないWeb向けスムーススクロールライブラリ。 Lenisは、Webページ向けのスムーススクロールライブラリです。ホイールやタッチによる入力を受け取り、スクロール位置を目標位置までアニメーションさせることで、より滑らかで心地よい操作感を実現します。ブラウザー本来のスクロールを置き換えるのではなく、その上に処理を重ねる仕組みのため、position: stickyやアンカーリンク、アクセシビリティに関する動作も引き続き機能します。

lenis は無料で使えますか？ライセンスは？

lenis は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

lenis は今もメンテナンスされていますか？

活発にメンテナンス中。lenis の最終コミットは 2026年10月29日 です。

lenis は何に使えますか？

マーケティングサイトやポートフォリオサイトにスムーススクロールを追加する Three.jsやWebGLのシーンをページスクロールに同期させる GSAP ScrollTriggerでスクロール連動アニメーションを作成する モーダルや入れ子のパネル内にスムーススクロールする領域を作る

lenis のインストール方法は？

npmでLenisをインストールする: npm i lenis コードにLenisをインポートする: import Lenis from 'lenis' autoRafを有効にしてインスタンスを作成する

lenis はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/darkroomengineering/lenis