GSAP Timeline Sequence

DEMO

CODE

<div class="demo-stage gts-stage">
  <p class="gts-label">MOTION LAB</p>
  <p class="gts-title">GSAP TIMELINE</p>
  <p class="gts-sub">1本のタイムラインで登場順を振り付ける</p>
  <button class="gts-cta" type="button">GET STARTED</button>
  <button class="gts-replay" type="button">↻ REPLAY</button>
</div>

.gts-stage { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7rem; padding:3rem 1.5rem; background:#0F0F12; min-height:300px; }
.gts-label { font-family:'Oswald',sans-serif; font-size:.7rem; letter-spacing:.35em; color:#E91B89; margin:0; }
.gts-title { font-family:'Oswald',sans-serif; font-size:clamp(1.8rem,5vw,2.6rem); font-weight:600; letter-spacing:.06em; color:#fff; margin:0; }
.gts-sub { color:#a9a9b2; font-size:.85rem; margin:0; text-align:center; }
.gts-cta {
  margin-top:.6rem; padding:.85rem 2.2rem; border-radius:999px; cursor:pointer;
  font-family:'Oswald',sans-serif; font-size:.78rem; letter-spacing:.2em;
  color:#fff; background:#E91B89; border:none;
}
.gts-replay {
  position:absolute; top:1rem; right:1rem; padding:.4rem .9rem; border-radius:999px; cursor:pointer;
  font-family:'Oswald',sans-serif; font-size:.65rem; letter-spacing:.15em;
  color:#c9c9d1; background:transparent; border:1px solid rgba(255,255,255,.25);
}
.gts-replay:hover { color:#E91B89; border-color:#E91B89; }

// 要 GSAP CDN（gsap.min.js）
var gtsTl = gsap.timeline({ defaults: { ease: 'power3.out', duration: 0.6 } });
gtsTl.from('.gts-label', { y: 14, opacity: 0 })
  .from('.gts-title', { y: 26, opacity: 0 }, '-=0.25')
  .from('.gts-sub', { y: 18, opacity: 0 }, '-=0.3')
  .from('.gts-cta', { scale: 0.85, opacity: 0, ease: 'back.out(1.7)' }, '-=0.2');
document.querySelector('.gts-replay').addEventListener('click', function(){
  gtsTl.restart();
});

AI PROMPT

ラベル→見出し→本文→CTAボタンが振り付け通りに順番に現れるヒーロー登場シーケンスをGSAPのtimelineで作って。const tl = gsap.timeline({ defaults: { ease: 'power3.out', duration: 0.6 } }) を作り、tl.from('.label', { y: 14, opacity: 0 }).from('.title', { y: 26, opacity: 0 }, '-=0.25').from('.sub', ...).from('.cta', { scale: 0.85, ease: 'back.out(1.7)' }, '-=0.2') とチェーンする。第3引数の '-=0.3' は「前の動きの終わり0.3秒前から開始」の相対位置指定で、これが重なりのリズムを作る。CTAだけback.outで弾ませるとメリハリが出る。GSAP CDN（gsap.min.js）の読み込みが必要。ヒーローセクション・モーダル初回表示に。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

BOOKS · PR · AMAZON

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

学びを止めない · AMAZONサブスク

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