GSAPテキストスタッガー（GSAP Text Stagger）はどんな効果ですか？

見出しの文字が1つずつ回転しながら跳ねて現れるGSAPのstaggerテキスト演出。ヒーロー・タイトルのインパクトに。REPLAYで再生できます。ヒーローの見出し・キャッチコピー・セクションタイトルなど、視線を集めたいテキストに向く演出です。

GSAP Text StaggerはCSSだけで実装できますか？

この効果はアニメーションライブラリGSAP（JavaScript）を使って実装します。CSSだけでは同じ制御は難しい効果です。

コードは無料で使えますか？

はい。Motion LabのコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。コピーしてそのままプロジェクトに利用できます。

GSAP Text Stagger — JS+GSAP Effect with AI Prompt

CODE

HTML

<div class="demo-stage gts-stage"><h2 class="gts-text">BUILD WITH GSAP</h2><button class="gts-replay" type="button">▶ REPLAY</button></div>

CSS

.gts-stage { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.5rem; padding:3rem; background:#0F0F12; min-height:280px; }
.gts-text { color:#fff; font-family:'Oswald',sans-serif; font-size:clamp(1.8rem,6vw,3.2rem); letter-spacing:.06em; perspective:600px; }
.gts-char { display:inline-block; }
.gts-replay { background:transparent; border:1px solid #E91B89; color:#E91B89; font-family:'Oswald',sans-serif; letter-spacing:.2em; font-size:.72rem; padding:.5rem 1.2rem; cursor:pointer; border-radius:4px; transition:all .2s; }
.gts-replay:hover { background:#E91B89; color:#fff; }

// 要 GSAP CDN（gsap.min.js）
(function(){
  var el = document.querySelector('.gts-text');
  if(!el) return;
  var text = el.textContent;
  el.innerHTML = text.split('').map(function(c){
    return c === ' ' ? '<span class="gts-char">&nbsp;</span>'
                     : '<span class="gts-char">' + c + '</span>';
  }).join('');
  function play(){
    gsap.from('.gts-char', { y: 40, opacity: 0, rotateX: -90, duration: 0.7, ease: 'back.out(1.7)', stagger: 0.04 });
  }
  play();
  var btn = document.querySelector('.gts-replay');
  if(btn) btn.addEventListener('click', play);
})();

AI PROMPT

Claude Cursor v0

PROMPT

見出しの文字が1つずつ回転しながら跳ねて現れるGSAPのstaggerテキスト演出を作って。JSでテキストを1文字ずつ<span class='char'>に分割（半角スペースは&nbsp;に）、gsap.from('.char',{y:40, opacity:0, rotateX:-90, duration:0.7, ease:'back.out(1.7)', stagger:0.04})で下から跳ね上げる。親要素にperspective:600pxを付けるとrotateXが立体的に見える。GSAP CDN（gsap.min.js）が必要。ヒーロー見出し・キャッチコピーのインパクトに。

BOOKS · PR · AMAZON

📖 なかしまぁ先生のCSSアニメーション入門 📖 UIデザインの心理学 ―わかりやすさ・使いやすさの法則 📖 Fundamentals of Web Animation with GSAP

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

GSAPテキストスタッガー（GSAP Text Stagger）とは

見出しの文字が1つずつ回転しながら跳ねて現れるGSAPのstaggerテキスト演出。ヒーロー・タイトルのインパクトに。REPLAYで再生できます。この効果はアニメーションライブラリGSAPで実装され、スクロール連動にはScrollTriggerを組み合わせる。タイムラインで複数の動きを順序立てて精密に制御できるのが特長です。

使いどころ

ヒーローの見出し・キャッチコピー・セクションタイトルなど、視線を集めたいテキストに向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。

CSS実装のポイント

JavaScriptで座標やタイミングを計算しながら要素のstyleを書き換えます。更新はrequestAnimationFrameでブラウザの描画タイミングに同期させ、位置の変更はtransformで行うとレイアウト再計算を避けられて軽くなります。動きを減らす設定（prefers-reduced-motion）の利用者へは演出を控えめにする配慮も大切です。

CSSとJavaScriptの違い

CSSアニメーションは記述が簡潔で軽く、ブラウザ側で最適化されるため高パフォーマンスですが、操作に応じた複雑な分岐や数値計算は不得意です。一方JavaScriptはイベントに反応して動きを動的に組み立てられる反面、書き方を誤ると処理が重くなりがちです。この効果は見た目はCSS・制御はJavaScriptという役割分担で成り立っています。