カテゴリー
お問い合わせ

【GSAP】面倒な文字分割は不要！SplitText を使った3つのテキストアニメーション

GSAP
目次

Webサイトのメインビジュアルなどでよく見かける「テキストが1文字ずつフワッと現れる」アニメーション。 これまでは素のJavaScriptでテキストを取得し、1文字ずつ <span> タグで囲んで…という面倒な処理を自作する必要がありました。

しかし、GSAPの公式プラグイン SplitText を使えば、そんな苦労は一瞬で吹き飛びます！ 以前は有料会員限定のプラグインでしたが、現在は誰でも利用可能になり、さらに使いやすくなりました。

今回は、テキストを「1文字ずつ（chars）」「単語ごと（words）」「行ごと（lines）」の3パターンで分割し、それぞれアニメーションさせるデモと、SplitText を使う圧倒的なメリットをご紹介します！

デモ動作

See the Pen GSAP SplitText でテキストアニメーション by mikanbako (@mikanbako) on CodePen.

全画面でのデモ動作は以下のリンクからご確認下さい！（別タブで開かれます）

実装コードの紹介

【HTML】

<div class="l-wrap">
  <!-- アニメーション切り替えボタン -->
  <div class="p-buttons">
    <button class="c-btn js-btn-chars">Chars (1文字ずつ)</button>
    <button class="c-btn js-btn-words">Words (単語ごと)</button>
    <button class="c-btn js-btn-lines">Lines (行ごと)</button>
  </div>

  <!-- アニメーションさせるテキスト -->
  <p class="p-text js-text">
    GSAPのSplitTextを使えば、<br>
    テキストアニメーションの実装が劇的に変わります！<br>
    It is very easy to use and super powerful.<br>
    Let's enjoy creative coding with GSAP!
  </p>
</div>

【CSS】

.l-wrap {
  padding: 40px;
  text-align: center;
}

.p-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 40px;
}

.c-btn {
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  background: #1bb4d4;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.3s;
}

.c-btn:hover {
  opacity: 0.8;
}

.p-text {
  font-size: 24px;
  font-weight: bold;
  line-height: 2;
}

【JavaScript】

// SplitTextプラグインの登録（必須）
gsap.registerPlugin(SplitText);

// テキスト要素の取得
const textElement = document.querySelector('.js-text');

// SplitTextのインスタンスを入れる変数
let split;

// 現在実行中のアニメーションを管理する変数
let currentAnimation = null;

// アニメーションと状態をリセットする関数
const resetText = () => {
  if (currentAnimation) currentAnimation.kill(); // 前のアニメーションを停止
  if (split) split.revert(); // 分割を解除して元のHTMLに戻す

  // きれいな状態に戻してから、再度SplitTextで分割し直す
  split = SplitText.create(textElement, { type: "chars,words,lines" });
};

// =========================================
// ① Chars (1文字ずつ) のアニメーション
// =========================================
document.querySelector('.js-btn-chars').addEventListener('click', () => {
  resetText();
  // split.chars に分割された1文字ずつの配列が入っている
  currentAnimation = gsap.from(split.chars, {
    duration: 0.6,
    opacity: 0,
    y: 20,
    stagger: 0.05, // 0.05秒ずつ遅延させて順番に動かす
    ease: "back.out(1.5)"
  });
});

// =========================================
// ② Words (単語ごと) のアニメーション
// =========================================
document.querySelector('.js-btn-words').addEventListener('click', () => {
  resetText();
  // 日本語の場合は空白（スペース）で単語とみなされます
  currentAnimation = gsap.from(split.words, {
    duration: 0.6,
    opacity: 0,
    rotationX: -90, // 奥から手前にパタッと倒れるような動き
    transformOrigin: "0% 50% -50",
    stagger: 0.1,
    ease: "power2.out"
  });
});

// =========================================
// ③ Lines (行ごと) のアニメーション
// =========================================
document.querySelector('.js-btn-lines').addEventListener('click', () => {
  resetText();
  // <br>タグや要素の幅による折り返し位置で自動的に行として判定される
  currentAnimation = gsap.from(split.lines, {
    duration: 0.8,
    opacity: 0,
    x: -50, // 左からスライドイン
    stagger: 0.2,
    ease: "power3.out"
  });
});

解説・SplitTextを使うメリット

自作の面倒な分割処理が不要になる！

JSでテキストアニメーションを実装する際、一番大変なのが「HTMLから文字列を取得し、split('') で一文字ずつ配列に分け、それを <span> や <div> タグで囲み直してHTMLに戻す」という下準備です。 SplitText を使えば、SplitText.create() を呼び出すだけで、内部的に自動で <div> で囲んでくれるため、コード量が減り、保守性が格段に上がります。

// 分割処理
split = SplitText.create(textElement, { type: "chars,words,lines" });

// 各アニメーション設定
// 1文字ずつ
gsap.from(split.chars, {...});
// 単語
gsap.from(split.words, {...});
// 行
gsap.from(split.lines, {...});

「行（lines）」や「単語（words）」の分割が超優秀

1文字ずつの分割なら自作でも可能ですが、「改行位置（行）」ごとの分割を自作するのはとても大変です。 SplitText は、ブラウザの幅による自然な折り返しや <br> タグを正確に計算し、完璧に「行」として分割してくれます。これが SplitText を使う最大のメリットの一つです。

GSAPの stagger との相性が抜群

分割された要素は、split.chars のように配列としてプロパティに格納されます。これをそのままGSAPの stagger機能に渡すだけで、綺麗に連番で動くアニメーションが一瞬で完成します。

revert() で一瞬で元通りに！

アニメーションが終わった後や、画面幅が変わった時に、分割した <span> タグのままにしておくとレイアウト崩れの原因になることがあります。SplitText には .revert() というメソッドが用意されており、これを呼ぶだけで一瞬で元の分割されていない綺麗なHTML構造に戻すことができます。

// 例：アニメーション完了時に分割（HTML構造）を元に戻す
gsap.from(split.chars, {
  duration: 0.6,
  opacity: 0,
  y: 20,
  stagger: 0.05,
  // アニメーションが全て完了したタイミングで実行される
  onComplete: () => {
    split.revert(); // <div>タグなどの分割を解除してクリーンな状態に戻す
  }
});

補足：公式ドキュメント

より詳しい仕様や最新の対応状況については、以下の公式ドキュメントをご参照ください。

・GSAP: SplitText

まとめ

今回は、誰でも利用可能になったGSAPの SplitText を使ったテキストアニメーションの実装方法をご紹介しました。

素のJavaScriptでDOM操作を書くのも勉強にはなりますが、実務においては「いかに安全で、工数をかけずにリッチな表現を作るか」が求められます。 GSAPの強力なプラグインを活用することで、複雑なアニメーションもシンプルに、そしてバグなく実装することができます。今後もこういった便利な機能は積極的に取り入れていきたいです！

Prev
Next

関連記事