【完全無料化】GSAP有料だったプラグインの中で気になってたもの使ってみたまとめ📚

先日Webflow のサポートにより、GSAP ライブラリ全体が 100 % 無料になり個人・商用を問わず利用可能との発表がありました。これまで使う機会がなかった有料プラグインに絞って、今回改めて使い方などを気になったものを解説してみます。

SplitText

HTML要素内のテキストを個々の文字、単語、行（それぞれが新しく作成された要素）に分割することができます。スクリーンリーダーへの自動アクセシビリティ、表示効果のためのマスク、レスポンシブな再分割など、高度な設定が可能になります。

使い方

分割したい要素に対して SplitText.create() を実行します。
デフォルトでは「行・単語・文字」単位で自動的にラップ要素が生成されます。

よく使いそうなオプション

charsClass wordsClass linesClass

オプション	効果
charsClass	1文字ごとのラップ要素に付けるクラス
wordsClass	1単語ごとのラップ要素に付けるクラス名
wordsClass	1行ごとのラップ要素に付けるクラス名

SplitTextがテキストを分割したときに、生成された各要素に自動的に付けるクラス名を指定するためのオプションです。

SplitText.create(".split", {
  type: "lines,words,chars",
  linesClass: "line",
  wordsClass: "word",
  charsClass: "char"
});

ブラウザ上での内部の構造

<div class="line">
  <div class="word">
    <div class="char">H</div>
    <div class="char">e</div>
    <div class="char">l</div>
    <div class="char">l</div>
    <div class="char">o</div>
  </div>
  <div class="word">
    <div class="char">w</div>
    <div class="char">o</div>
    <div class="char">r</div>
    <div class="char">l</div>
    <div class="char">d</div>
  </div>
</div>

tag

SplitTextがテキストを分割したときに生成するラップ要素（包む要素）のHTMLタグを指定するオプションです。デフォルトではdivが設定されています。

SplitText.create(".split", {
  type: "chars",
  tag: "span"
});

ブラウザ上での内部の構造

<span class="char">H</span>
<span class="char">e</span>
<span class="char">l</span>
<span class="char">l</span>
<span class="char">o</span>

mask

指定された単位（"lines", "words", "chars" のいずれか）に対して、アニメーション用のマスク要素を自動でラップする機能

SplitText.create(".split", {
  type: "lines",
  mask: "lines"
});

これにより、各行が以下のように2重にラップされます

<div class="line-mask">
  <div class="line">This is line 1</div>
</div>

この「line-mask」が overflow: hidden になって、内側の .line をスライドさせたりフェードさせたりできるようになります。

autoSplit onSplit()

autoSplitはtrueに設定するとリサイズやフォント読み込み完了後に自動で再分割＋再アニメーションが実行されます。レスポンシブでレイアウトが変わる可能性がある場合に有効で例えば文字の行数が変わったとしても自動で再分割されるようになります。またこのことに追加してonSplit()によって再実行する処理が必要です。

ScuramTexPlugin

ScrambleText Pluginは、テキストをランダムな文字列にスクランブルさせながら最終的な文章へとアニメーションしていくGSAPのプラグインです。

Draggable

GSAPのDraggableは、HTML要素をドラッグ可能にするための便利なプラグインです。これを使うと、ユーザーが要素をドラッグして動かすインタラクションを簡単に実装できます。

使い方

HTMLの要素をドラッグ可能にするには、Draggable.create()メソッドを使います。

Draggable.create(".draggable-element");

よく使いそうなオプション

オプション	説明	デフォルト値
type	ドラッグの方向を設定します。x（水平）y（垂直）x,y（両方向）を指定できます。	"x"
inertia	trueで慣性効果を有効にします。慣性に基づいてドラッグ後も動きます。	false
bounds	ドラッグ範囲を制限。指定した範囲外にはドラッグできない。回転の範囲なども制限できます	false
cursor	ドラッグ中のカーソルの形を変更できます。例えば"move"や"grabbing"を指定します。	"auto"
onDrag	ドラッグ中に呼ばれるコールバック関数です。現在の位置などを取得できます。	null
onRelease	ドラッグが終了したときに呼ばれるコールバック関数です。例えば、ドラッグ後の位置に基づく処理を行えます。	null

GSAP Flip

レイアウトを好きに変えたあと、前の見た目との“差分”だけを滑らかに補完してくれます。

使い方

手順	コード	説明
①State	const state = Flip.getState(targets);	変更前（First）の座標・サイズを保存
②DOM を変更	parent.append(child);	並べ替え・追加・削除など自由に操作して Last の状態 を作る
③from / to / fit	Flip.from(state, options);	①と②の差を自動で Invert → Play（アニメーション）

 import { gsap } from "https://cdn.skypack.dev/gsap@3.12.5";
  import { Flip } from "https://cdn.skypack.dev/gsap@3.12.5/Flip";
  gsap.registerPlugin(Flip);

  const list = document.getElementById("list");
  document.getElementById("btn").addEventListener("click", () => {
    /* ① 変更前の状態を保存 */
    const state = Flip.getState(".item");

    /* ② DOM を好きに並べ替え（ここでは末尾を先頭へ） */
    list.prepend(list.lastElementChild);

    /* ③ 差分をアニメーション */
    Flip.from(state, {
      duration: 0.6,
      ease: "power2.inOut",
      absolute: true,   // Grid/Flex でも安定
      stagger: 0.02,    // 複数要素なら遅延演出
    });
  });

アニメーションの例はこちらになります。

ScrollSmoother

慣性スクロールが簡単に実装できる。

使い方

ScrollSmoother.create()を使って、ScrollSmootherを初期化します。

よく使いそうなオプション

オプション	説明
smooth	慣性の強さ
normalizeScroll	ユーザーのスクロール挙動を修正する
ignoreMobileResize	モバイル時のリサイズイベントを無視する
onUpdate	SmoothScroller がコンテンツの位置を更新するたびに呼び出す関数
onStop	スムーズスクロールが停止したとき (ネイティブスクロール位置に追いついたとき) に呼び出す関数。

effects のオプションを true にすることで任意の要素にdata-speed、data-lagをつけることができます。パララックスのアニメーションが簡単に実装することが可能です。

オプション	例	説明
data-speed	data-speed="0.5"	スクロールに対して遅く動く
data-lag	data-lag="0.3"	スクロールに「追いつくまでに遅れ」が出る

アニメーションの例

MorphSVG

SVGの<path>要素内のd属性（パスの形）をアニメーションして変形させることができます。

使い方

①SVGの中に2つ以上の<path>を用意します。
②gsap.to() を使って、変形させたいパスに対してmorphSVGプロパティを指定します。

よく使いそうなオプション

type

デフォルトではlinearが設定されているのですがrotationalを設定することによって点の回転角度を考慮して、ねじれを防ぐような自然な補間を行うことができます。

shapeIndex

形を自然に変形させるために、始点（パスのどこから morph を始めるか）を調整するオプションです。

map

SVGの<path>は多数の点でできていて、MorphSVGPluginは元のパスと変形先パスの点を「順番に対応付けて補間」します。その「対応のさせ方」の基準がmapです。デフォルトではパスの長さをもとに点を均等に配置し、対応付けするsizeが設定されています。sizeに対して曲がり具合や角の位置を見てマッチングするcomplexityの設定があります。

アニメーションの例

MotionPathPlugin

オブジェクトをSVGパスやカスタム軌道に沿って動かすためのプラグインです。

使い方

①SVGのパスを準備してgsap.to()など用いてmotionPathプロパティで

よく使いそうなオプション

start end

パスの一部だけを使ってアニメーションさせることができます。

align

要素の向きをどのパスに合わせるかを指定するための設定。

alignOrigin

回転の基準点

path

SVGパスのセレクタ、または座標配列

ScrollTriggerと組み合わせるとパスに沿ったアニメーションをスクロールと連動させて動かすことができます。

アニメーションの例

Physics2D

物理演算（重力、速度、角度、摩擦など）を使ってアニメーションを自然に動かすためのプラグインです。たとえば、粒子が飛び散るような動きや、弾むような動きを簡単に実現できます。

よく使いそうなオプション

オプション	説明
velocity	初速度（数値が大きいほど早く動く）
angle	発射角度
gravity	重力
friction	減速の強さ（0で無視、1で急停止）

アニメーションの例

終わり

いかがだったでしょうか。他にも DrawSVGPlugin や CustomEasePlugin など魅力的な機能はたくさんありますが、今回はひとまずここまで。今後もできたら順次紹介していければと思います！