GSAP Pin Section

DEMO

CODE

<div class="demo-stage gps-scroller">
  <div class="gps-intro">▼ この枠内をスクロール ▼</div>
  <section class="gps-pin">
    <p class="gps-label">PINNED SECTION</p>
    <p class="gps-text">スクロールしてもこのセクションは固定されたまま、下のバーだけが進みます。</p>
    <div class="gps-track"><div class="gps-bar"></div></div>
  </section>
  <div class="gps-outro">PINNED RANGE END — ここから通常スクロールに戻ります</div>
</div>

.gps-scroller { height:320px; overflow-y:auto; background:#0F0F12; border-radius:8px; }
.gps-intro { height:120px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.4); font-family:'Oswald',sans-serif; letter-spacing:.15em; font-size:.8rem; }
.gps-pin {
  height:320px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem;
  padding:2rem; background:#15151A; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08);
}
.gps-label { font-family:'Oswald',sans-serif; font-size:1.3rem; letter-spacing:.2em; color:#fff; margin:0; }
.gps-text { color:#a9a9b2; font-size:.8rem; line-height:1.7; margin:0; text-align:center; max-width:340px; }
.gps-track { width:min(320px,80%); height:6px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden; }
.gps-bar { width:0%; height:100%; border-radius:999px; background:linear-gradient(90deg,#E91B89,#7B37A8); }
.gps-outro { height:200px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.35); font-family:'Oswald',sans-serif; letter-spacing:.12em; font-size:.72rem; padding:0 1.5rem; text-align:center; }

// 要 GSAP + ScrollTrigger CDN（gsap.min.js / ScrollTrigger.min.js）
// デモは枠内スクロールのため scroller を指定。ページ全体で使う場合は scroller 不要
gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.create({
  trigger: '.gps-pin',
  scroller: '.gps-scroller',
  start: 'top top',
  end: '+=260',
  pin: true
});
gsap.to('.gps-bar', {
  width: '100%', ease: 'none',
  scrollTrigger: {
    trigger: '.gps-pin',
    scroller: '.gps-scroller',
    start: 'top top',
    end: '+=260',
    scrub: true
  }
});

AI PROMPT

スクロール中にセクションを画面に固定（ピン留め）し、固定中の進捗に合わせて中身が変化するGSAP ScrollTriggerのpinを作って。gsap.registerPlugin(ScrollTrigger) 後、ScrollTrigger.create({ trigger: '.section', start: 'top top', end: '+=600', pin: true }) でセクションを固定。固定中の演出は gsap.to(要素, { ..., scrollTrigger: { trigger: '.section', start: 'top top', end: '+=600', scrub: true } }) で進捗連動（scrub）にする。pinはトリガー要素の下に pin-spacer を自動挿入してレイアウトを保つ。GSAP CDN（gsap.min.js + ScrollTrigger.min.js）の読み込みが必要。製品紹介・ストーリーテリングLPの土台に。

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アソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。