カテゴリー
お問い合わせ

【GSAP】TextPluginで作る！ループ＆バックスペース付きのタイプライター演出

GSAP
目次

Webサイトのヒーローエリアなどでよく見かける、文字が1文字ずつ打ち込まれる「タイプライター風」のアニメーション。 GSAPの公式プラグイン TextPlugin を使えば、テキストを設定するだけで簡単に実装できるのですが、単発で表示して終わり…では少し物足りないですよね。

そこで今回は、複数の文章を用意し、「①打ち込んで表示 → ②少し待機 → ③バックスペースで後ろから消す」 という一連の流れを無限ループさせる、より実践的でリッチなタイピング演出の作り方をご紹介します！

プラグインの基本機能だけでなく、文字数に応じた自然な速度計算や、JavaScriptの標準メソッドを組み合わせた「バックスペースのように消す処理」の工夫など、役立つテクニックを詰め込みました！

デモ動作

See the Pen GSAP TextPluginで作るタイプライター演出 by mikanbako (@mikanbako) on CodePen.

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

実装コードの紹介

【HTML】

<div class="l-wrap">
  <h2>タイプライター デモ</h2>
  
  <div class="p-typewriter-box">
    <!-- テキストが打ち込まれる空の要素 -->
    <span class="p-typewriter-text js-typewriter"></span>
  </div>
</div>

【CSS】

.l-wrap {
  color: #3e3e3e;
  padding: 40px 20px;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
h2 {
  font-size: 16px;
  color: #1bb4d4;
  margin-bottom: 40px;
}

/* タイピングエリアの装飾 */
.p-typewriter-box {
  background-color: #333;
  padding: 40px 20px;
  border-radius: 12px;
  min-height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* テキストと点滅カーソル */
.p-typewriter-text {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 0.05em;
  position: relative;
}

/* テキストの末尾にチカチカするカーソルをつける */
.p-typewriter-text::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 1.2em;
  background-color: #1bb4d4;
  vertical-align: text-bottom;
  margin-left: 4px;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%, 100% { 
    opacity: 1;
  }
  
  50% { 
    opacity: 0;
  }
}

【JavaScript】

// TextPluginの登録（必須）
gsap.registerPlugin(TextPlugin);

// 表示したい複数の文章を配列で用意
const sentences = [
  "Hello, World!",
  "GSAPのTextPluginはとても便利です。",
  "文字数に合わせて速度も自動計算！",
  "クリエイティブなWebサイトを作ろう！"
];

// テキストを表示させる要素
const target = document.querySelector('.js-typewriter');

// 無限ループするタイムラインを作成
const tl = gsap.timeline({ repeat: -1 });

// 配列の文章を一つずつタイムラインに追加していく
sentences.forEach(text => {
  
  // ① タイプライター風に打ち込んで表示
  // durationは文字数 × 0.04秒で計算し、文章の長さに応じて自然な速度にする
  tl.to(target, {
    duration: text.length * 0.04,
    text: text,
    ease: "none" // タイピングは一定速度（none）が自然！
  })
  
  // ② ちょっと待機（読ませる時間）
  .to({}, { duration: 1 })
  
  // ③ バックスペースで後ろから消す演出
  // durationは表示時より少し速く（文字数 × 0.02秒）設定
  .to({}, {
    duration: text.length * 0.02,
    ease: "none",
    onUpdate: function() {
      // 進行度（0〜1）を取得
      const progress = this.progress();
      // 進行度に合わせて、表示する文字数を減らしていく
      const currentLength = Math.ceil(text.length * (1 - progress));
      // substringで文字列を切り出し、テキストを更新
      target.textContent = text.substring(0, currentLength);
    }
  });
  
});

コードの解説・こだわったポイント

duration を文字数から自動計算

// durationは文字数 × 0.04秒で計算し、文章の長さに応じて自然な速度にする
tl.to(target, {
  duration: text.length * 0.04,
  text: text,
  ease: "none" // タイピングは一定速度（none）が自然！
})

アニメーションの時間を固定値（例：duration: 2）にしてしまうと、短い文章は遅く、長い文章は異常に速く表示されてしまい、不自然になります。 text.length * 0.04 のように文字数に係数を掛けることで、どんな長さの文章でも常に一定のタイピングスピードを保つことができます。

バックスペース演出は onUpdate と substring で自作！

onUpdate: function() {
  // 進行度（0〜1）を取得
  const progress = this.progress();
  // 進行度に合わせて、表示する文字数を減らしていく
  const currentLength = Math.ceil(text.length * (1 - progress));
  // substringで文字列を切り出し、テキストを更新
  target.textContent = text.substring(0, currentLength);
}

TextPluginの仕様上、単に text: "" を指定すると「文章の先頭」から消えていってしまいます。キーボードのバックスペースのように「後ろから1文字ずつ削る」動きを再現するために、ここではプラグインの機能を使わずGSAPの onUpdate を活用しています。 アニメーションの進行度（this.progress()）を取得し、それに合わせてJavaScriptの標準メソッドである substring() で文字列の末尾を削っていくことで、リアルなバックスペース演出を実現しました。

CSSで点滅するカーソルをプラス

/* テキストの末尾にチカチカするカーソルをつける */
.p-typewriter-text::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 1.2em;
  background-color: #1bb4d4;
  vertical-align: text-bottom;
  margin-left: 4px;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%, 100% { 
    opacity: 1;
  }
  
  50% { 
    opacity: 0;
  }
}

タイプライター感を出すために、CSSの ::after 擬似要素と animation（step-end）を使って、末尾でチカチカと点滅するカーソル（|）を実装しています。これがあるだけで、リッチさが格段にアップします！

補足：公式ドキュメント

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

・GSAP: Text

まとめ

今回は、GSAPの TextPlugin とタイムライン機能を組み合わせた、タイプライター演出の実装方法をご紹介しました。

プラグインは非常に便利ですが、デフォルトの仕様だけでは思い通りの表現にならないこともあります。そんな時に、今回のように onUpdate などのコア機能とJavaScriptの基本メソッドを組み合わせて「自分で処理を作る」ことができると、表現の幅が無限に広がります。

これからもGSAPの機能を柔軟に組み合わせて、ユーザーの目を惹くリッチなアニメーションを作っていきたいと思います！

Prev
Next

関連記事