Open5

Gsapと仲良くなる

GSAP
kishipoyokishipoyo

突然こんなエラーが出てハマった。

エラー画像

調べたところ、2025年4月末にGSAPの全プラグインが無料化された影響で、旧トライアル版（有料時代の .js ファイル）が使えなくなったのが原因だった。
ScrollSmoother もそれに該当。

対処法

CDNで最新版（3.12.5）を読み込んだら解消。

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollSmoother.min.js"></script>

npm使ってる人は gsap@3.12.5 以上にアップすればOK。

kishipoyokishipoyo

ScrollSmootherが動かないと思ったら、3.12.5だとうまく動かなかった。
公式サイトを見たら、3.13.0から正式対応っぽい。以下で解決。

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollSmoother.min.js"></script>

常に 公式のInstallationガイド を見とくべきだな。バージョン依存に気をつけます。

kishipoyokishipoyo

ScrollSmootherと仲良くなりたい①

data-speed 属性とは

特定の要素に対して「スクロール速度の倍率」を指定し、視差効果（パララックス） を演出する。

  • data-speed="1"
     → 親スクロールと同じ速度（基準値）
  • data-speed > 1（例：1.2）
     → スクロールに対して速く動く（上方向に先に進む）
     例：A（data-speed="1.2"）→ 上へ素早く移動するイメージ
  • data-speed < 1（例：0.5）
     → スクロールに対して遅く動く（下方向に残る）
     例：B（data-speed="0.5"）→ 下にとどまって残像のような動き

data-lag 属性とは

「動きに遅延（ラグ） を加える」ことで、スクロールの滑らかさや追従感を演出する。

  • data-lag="0.3"
     → 0.3秒程度のラグで追従
     例：C（data-lag="0.3"）→ なめらかに後からついてくる

補足ポイント

属性 効果 よく使う用途
data-speed スクロール速度に対する倍率指定 背景と前景に視差をつける
data-lag アニメーション遅延（慣性っぽい動き） テキスト・小要素に自然な動きの加算

使用例（HTML）

<div class="bg" data-speed="0.5">背景（ゆっくり動く）</div>
<div class="mid" data-speed="1">通常速度</div>
<div class="fg" data-speed="1.3">前景（速く動く）</div>
<div class="text" data-lag="0.2">ラグ付きテキスト</div>
kishipoyokishipoyo

ScrollSmoother vs Lenis 比較メモ

ScrollSmoother（GSAP公式）

  • wrapper / content の2構造が必須（親が固定・子がスクロール）
  • ScrollTriggerとの親和性が高い
  • パララックスや背景遅延など、構造と連携を前提とした演出が得意
  • ページ全体でスクロールを制御するタイプ
  • 軽量ではないけど、アニメーション制御しやすい
  • CDNでも簡単に導入可能（ScrollSmoother.create()）

Lenis（studio-freight製）

  • 単一の .scrollContainer を指定するだけでOK（構造の縛りがゆるい）
  • 軽量・高速
  • 他アニメーションライブラリとの共存しやすい
  • 慣性スクロールに特化（逆にパララックスの制御は別途）
  • スクロールイベントのカスタム制御も柔軟
  • importしてnew Lenis({...})で使える

比較まとめ

項目 ScrollSmoother Lenis
スクロール制御 慣性＋アニメ制御向き 慣性スクロール専用
導入の手軽さ やや複雑（構造制約あり） シンプル
アニメーション連携 ◎（GSAP前提） △（組み合わせ次第）
軽さ △（重め） ◎（超軽量）
パララックス ◎ △（ScrollTrigger併用要）
構造制約 強め ほぼなし

使い分け所感

  • 構造からガッツリ組むなら ScrollSmoother
  • 既存サイトや柔軟性重視なら Lenis
  • パララックスやScrollTrigger連携する場合はScrollSmootherの方がスムーズ
  • 逆にただの慣性スクロールだけならLenisで十分