Lenisを使って慣性スクロールを実装

「Lenis」というJavaScriptライブラリを使った実装方法メモです。

スクロールのなめらかな動きと、スクロール後に余韻が残る慣性スクロールを簡単に実装できます。アニメーションライブラリ「GSAP」と併用もできます。

確認バージョンは「1.3.13」です。

公式サイト: Lenis – Get smooth or die trying

インストール

パッケージマネージャーでの使用も可能ですが今回はCDNを使用します。

GitHub – darkroomengineering/lenis

<script src="https://unpkg.com/lenis@1.3.13/dist/lenis.min.js"></script> 

<script src="https://unpkg.com/lenis@1.3.13/dist/lenis.min.js"></script> 

「コピペでもいいかも」と思うくらいデフォルトのCSSスタイルは少ないです。

CSSファイル – lenis.css

<link rel="stylesheet" href="https://unpkg.com/lenis@1.3.3/dist/lenis.css">

<link rel="stylesheet" href="https://unpkg.com/lenis@1.3.3/dist/lenis.css">

基本のセットアップ

とりあえず慣性スクロールがかけられれば良い、という場合は以下のコードのみでOK。

const lenis = new Lenis({
  autoRaf: true,
});

const lenis = new Lenis({
  autoRaf: true,
});

Lenisを使ったスムーススクロールサンプル１

「サンプル１」ではCSSをインストールせず「lenis.min.js」のインストールと上記コードの記述だけで実装できました。とても簡単です。