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

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

SplitTextは、テキストを文字、単語、行ごとに分割することができるGSAPのプラグインです。
分割したテキストに対して個別にアニメーションを適用できるため、表現力の高いテキストアニメーションを実装できます。
例えば、以下のような演出が可能です。

• タイプライター風の演出

• 文字がばらけるアニメーション

• 行ごとに遅れてフェードインする演出

など、多彩なテキストアニメーションが可能になります。

▼実際の動き

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

▼基本的な書き方

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

最初に、SplitTextを使ってテキストを文字・単語・行に分割します。クラス名を指定するだけで、対象のテキストが自動的に分割されます。

const split = new SplitText(".splitText", { type: "chars, words, lines" });

次に、分割したテキストに対してアニメーションを設定します。

gsap.from(split.chars, {
  duration: 0.6,
  opacity: 0,
  y: 20,
  stagger: 0.05
});

ここではchars（文字）を指定しているため、文字単位でアニメーション が実行されます。
同様に、words（単語）、lines（行）を指定すれば、アニメーションの単位を切り替えることも可能です。

上で説明した通り、SplitTextでは、テキストを分割する単位としてchars（文字）・words（単語）・lines（行） を指定できます。

どの単位を使うかによってアニメーションの印象や適した利用シーンが大きく変わるため、それぞれの特徴を理解して使い分けることが重要です。

chars（文字）

chars は、テキストを1文字ずつ分割します。
SplitTextの中で最も細かく制御できるため、表現力の高いテキストアニメーションを実装できます。ただし、文字数が多い文章に使用するとDOMが増えすぎるため、使いどころには注意が必要です。

主な使用シーン

• ヒーローエリアのキャッチコピー
• 大きい見出し

words（単語）

words は、テキストを単語単位で分割します。
日本語だと上手く単語ごとに分割できない場合がありますので、英字での使用がおすすめです。単語ごとに遅れて表示されるため、文章の意味を追いやすいテキストアニメーションになります。

主な使用シーン

• 英字のキャッチコピー
• 英字の見出し

lines（行）

lines は、テキストを行単位で分割します。
文章量が多い場合でも、読みやすさを保ったままアニメーションできます。行ごとにフェードインするため、ユーザーは内容を自然な流れで読み進めることができます。

主な使用シーン

• リード文
• 説明文
• セクションの導入テキスト

どのように選べと良い？

上記の「主な使用シーン」を参考にしつつ、「目立たせたいのか」「読ませたいのか」を基準に選ぶのがおすすめです。
見出しやキャッチコピーなど、印象を強めたいテキストは文字や単語単位でアニメーションさせると効果的です。
一方で、説明文などの長いテキストを1文字ずつアニメーションさせてしまうと可読性が下がり、ユーザーのストレスに繋がってしまうこともあります。なので行ごとが効果的になります。

テキストの役割に合わせて分割単位を選ぶことが、自然で魅力的なテキストアニメーションにつながります。

実務で使えるテキストアニメーションの例を紹介します。
どれも汎用性が高く、コーポレートサイトやLP、ブランドサイトなどでそのまま使えます。

1) 行ごとに表示する（ゆっくりフェードアップ）

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

2) 単語ごとに表示する（回転あり）

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

3) 文字ごとに遅れて表示する（下から跳ねるように）

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

ScrambleTextはテキストをランダムな文字列に変化させ、最終的なテキストへと切り替える演出ができるGSAPのプラグインです。

文章だとイメージしづらいかと思いますので、まずは実際のアニメーションをご確認ください。

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

このように、ランダムな文字が文章に変わっていきます。システム・プログラミング風のテキストアニメーションを、比較的シンプルなコードで実装できるのが魅力です。
コードはとても短くて、こちらでアニメーション終了までの時間と最終的に表示するテキストを指定しています。

▼コード

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

主な使用シーン

• ローディング中のテキスト表示
• ステータス表示や数値の表示
• ファーストビューのアクセント
• IT・テクノロジー系サイトのUI演出

ScrambleTextは視覚的なインパクトが強いため、使いどころを誤ったり、頻繁に使用するとうるさい演出になりがちです。そのため、短いテキストに使用したり、装飾目的のテキストに使用するのがおすすめです。

ScrambleTextでは、変化中に出現させる文字を指定できます。

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

このように、charsの中に文字を指定します。
今回は数字だけでやりたかったため、"0123456789"と入れました。
英字だけが良い場合は"ABCDEFGHIJKLMNOPQRSTUVWXYZ"、記号の場合は"!@#$%^&*()_+-=[]{}<>?"などとすると良いでしょう。

また、speedで変化中の文字の更新速度を変えられます。
数値が大きいほど速くなります。

SplitTextは、テキストを文字・単語・行に分割し、動きそのものをコントロールすることで、視線誘導や強調表現に効果を発揮します。
特に見出しやキャッチコピーなど、「目立たせたいテキスト」に適しています。

一方、ScrambleTextは、テキストをランダムに変化させながら表示することで、一時的な演出や装飾として強い印象を与えることができます。ローディング表示やシステム風のUI演出など、「変化を見せたいテキスト」に向いています。

どちらも表現力は高いですが、重要なのは使い分けです。派手なアニメーションを多用するのではなく、「どこで」「何を伝えたいか」を意識して取り入れることで、サイト全体の完成度が大きく向上します。

GSAPのテキストアニメーションは、少しの工夫で印象が大きく変わります。
SplitTextとScrambleTextをうまく組み合わせ、ぜひ表現の幅を広げてみてください。

【関連記事】

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

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