まずはGSAPの導入方法から解説します。
導入方法はいくつかありますが、今回は2通りの方法をご紹介します。

1. CDNを利用する
   公式サイトから、「CDN」のタブを開き「ScrollSmoother」にチェックを入れます。
   ピンクで囲ったコードをコピーして任意の場所（</body>の手前など）に貼り付けてください。
   ※GSAP自体の導入もまだであれば、水色で囲ったコードも一緒に貼り付けてください。
   ※この時、水色のコードが上になるよう貼り付けないとエラーになりますのでご注意ください。
2. 直接ファイルをダウンロードする
   GitHubの、dist>ScrollSmoother.min.jsとScrollTrigger.min.jsをダウンロードします。（ScrollTriggerも必ずダウンロードください）
   ダウンロードしたファイルは任意の場所に設置してください。
   GSAP自体の導入もまだであれば、dist>gsap.min.js も一緒にダウンロード、設置してください。
   

ScrollSmootherは、GSAPが提供するプラグインのひとつで、慣性スクロールを実装できます。

一般的なCSSやJavaScriptによるスムーススクロールとは異なり、ScrollSmootherはネイティブスクロール（デバイス本来のスクロール）を活用しています。

そのため、他のスクロール系ライブラリが入っていたとしても、競合する可能性が低くなります。
また、GSAPのScrollTriggerとの相性も良いので、両者を組み合わせることでスクロールに連動したより上質なWebアニメーションを作れます。

ScrollSmootherを使用する場合、スクロール対象となるコンテンツを専用のラッパー要素で囲む必要があります。

<div id="smooth-wrapper">
	<div id="smooth-content">
	</div>
</div>

この構造は必須ですので、idなども変えずにそのまま使用してください。

HTML構造を用意したら、JavaScriptでScrollSmootherを初期化します。

gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
ScrollSmoother.create({
	smooth: 0.8,
});

このコードだけでScrollSmootherによる慣性スクロールが有効になります。
ここで設定している「smooth」は、スクロールしてからそれに追いつくまでの時間です。大きいほどゆったり動きます。

▼実際の動き

See the Pen
【GSAP】SplitText_No4 by ishi (@qwwbetnz-the-typescripter)
on CodePen.

単にスクロールをなめらかにするだけでなく、スクロール量に応じたアニメーションを自然な挙動でコントロールできる点がScrollSmootherの大きな強みです。

ここでは、ScrollSmootherならではの代表的な使い方として、パララックス表現を紹介します。

data-speedで要素ごとに量の変更

実務では、全ての要素を同じ速度にするのではなく、要素ごとに動く量を変えたいこともあります。
要素にdata-speed属性を指定することで、要素ごとに変えることが可能です。

See the Pen
【GSAP】ScrollSmoother_No2 by ishi (@qwwbetnz-the-typescripter)
on CodePen.

このように、JSにはeffects: true,を追加し、HTMLで対象の各要素にdata-speed="clamp(0.1)"をつけてください。
この数値が大きいほど多く動きます。
（今回は「要素3」の数値が一番大きいため、ビューンと遠くまで動くのが分かるかと思います！）

data-lagで要素ごとにスピードの変更

動く量は同じで良いけど、到達までのスピードを要素ごとに変えたい場合もあります。
この場合は、要素にdata-speed属性を指定することで可能になります。

data-lag は、要素の移動量自体は変えずに、スクロール位置に追従するまでの時間を遅延させるための属性です。
この「ラグ（遅れ）」によって、要素は通常のスクロール位置からわずかに遅れて動き、一定時間をかけて本来の位置に「追いつく」ような挙動になります。

See the Pen
Untitled by ishi (@qwwbetnz-the-typescripter)
on CodePen.

このように、JSにはeffects: true,を追加し、HTMLで対象の各要素にdata-lag="0.3"をつけてください。
この数値が大きいほうが、ラグが大きくなります。
（今回は「要素3」の数値が一番大きいため、ゆっくり動くのが分かるかと思います！）

ScrollSmootherを実際のサイトで使用してみて、注意が必要だった点がありますのでご紹介します。

position: fixed、stickeyが使えない

ScrollSmootherの管理下にある要素内では、position: fixed、position: stickeyが機能しませんでした。
グローバルナビゲーションなどでfixedを使用したい場合は、要素を範囲外に出してあげましょう。

<header class="global-nav">
  <!-- fixed にしたい要素 -->
</header>

<div id="smooth-wrapper">
  <div id="smooth-content">
    <!-- ScrollSmoother対象コンテンツ -->
  </div>
</div>

このように構造を分けることで、position: fixed や position: stickyを問題なく使用できます。

スムーススクロールを実装する手段として、Lenisはよく使用されているライブラリの一つです。

どちらも慣性スクロールを実現できますが、設計思想や得意分野が異なります。
ここでは、実務で選定する際に押さえておきたいポイントを整理します。

ScrollSmootherの特徴

ScrollSmootherは、GSAP公式のプラグインとして提供されており、他のGSAPアニメーションとも親和性が高いです。

• GSAP・ScrollTriggerとの高い親和性
• パララックスやスクロール連動演出が実装しやすい
• data-speed / data-lag など専用の機能がある

スクロールに連動したアニメーションを多用する場合や、表現を重視するケースに向いています。

Lenisの特徴

Lenisは、軽量でシンプルなスムーススクロールライブラリです。スクロール体験に特化しており、余計な機能を持たないのが特徴です。

• 軽量で導入が簡単
• ページ全体をスムーススクロールできる
• position: fixed / sticky があっても問題ない

複雑な演出よりも、操作性や安定性を重視するケースに向いています。

比較

実務での選び方

実務では、どのようなサイトを作るかによっておすすめライブラリが変わります。

• ScrollTriggerと連動させたパララックス表現がしたい→ ScrollSmoother

• シンプルにページをスムーススクロールさせたい→ Lenis

どちらが優れているかではなく、用途に合った選択をすることが重要です！

ScrollSmootherは、GSAPが提供するプラグインで、慣性スクロールとスクロール連動アニメーションを自然に組み合わせられるのが特徴です。

パララックス表現や遅延演出（data-speed / data-lag）など、表現の幅を広げることができます。
一方で、注意点が必要なこともありますので、特性を理解し適切に使用することが大切となります。

ぜひ実際に手を動かしながら、自分のサイトに合ったスクロール演出を試してみてください！

【関連記事】

▼GSAPの導入方法や、アニメーションの作り方を知りたい方はこちら
GSAP入門編｜アニメーションの作り方を解説

▼GSAPの基礎や特徴、事例を知りたい方はこちら
GSAPの基礎と特徴を徹底解説｜事例から学ぶ活用法