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

SplitText

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

使い方

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

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

charsClass, wordsClass, linesClass

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");

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

GSAP Flip

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

使い方

 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を初期化します。

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

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

アニメーションの例

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

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

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

アニメーションの例

終わり

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