GSAP Horizontal Scroll

DEMO

CODE

<div class="demo-stage ghs-scroller">
  <div class="ghs-intro">▼ この枠内を縦にスクロールするとパネルが横に流れます ▼</div>
  <section class="ghs-pin">
    <div class="ghs-track">
      <div class="ghs-panel"><span>01</span>HORIZONTAL</div>
      <div class="ghs-panel"><span>02</span>SCROLL</div>
      <div class="ghs-panel"><span>03</span>POWERED BY</div>
      <div class="ghs-panel"><span>04</span>GSAP</div>
    </div>
  </section>
  <div class="ghs-outro">HORIZONTAL RANGE END</div>
</div>

.ghs-scroller { height:320px; overflow-y:auto; background:#0F0F12; border-radius:8px; }
.ghs-intro { height:110px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.4); font-family:'Oswald',sans-serif; letter-spacing:.12em; font-size:.75rem; padding:0 1.5rem; text-align:center; }
.ghs-pin { height:320px; overflow:hidden; display:flex; align-items:center; }
.ghs-track { display:flex; width:400%; height:75%; }
.ghs-panel {
  width:25%; height:100%; flex:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
  color:#fff; font-family:'Oswald',sans-serif; letter-spacing:.18em; font-size:1rem;
  border-right:1px solid rgba(255,255,255,.08); background:#15151A;
}
.ghs-panel:nth-child(even) { background:#1A1A20; }
.ghs-panel span { color:#E91B89; font-size:1.6rem; }
.ghs-outro { height:160px; 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; }

// 要 GSAP + ScrollTrigger CDN（gsap.min.js / ScrollTrigger.min.js）
// デモは枠内スクロールのため scroller を指定。ページ全体で使う場合は scroller 不要
gsap.registerPlugin(ScrollTrigger);
gsap.to('.ghs-track', {
  xPercent: -75, // パネル4枚 = (4-1)/4 * 100
  ease: 'none',
  scrollTrigger: {
    trigger: '.ghs-pin',
    scroller: '.ghs-scroller',
    start: 'top top',
    end: '+=420',
    scrub: true,
    pin: true
  }
});

AI PROMPT

縦スクロールに連動してパネルが横に流れる横スクロールセクションをGSAPで作って。横並びのパネルを width: パネル数×100% のトラック（display:flex）に入れ、外側セクションは overflow:hidden。gsap.to(track, { xPercent: -(パネル数-1)/パネル数*100, ease: 'none', scrollTrigger: { trigger: セクション, start: 'top top', end: '+=1200', scrub: true, pin: true } }) で、セクションをpinしたまま縦スクロール量をxPercentに変換する。ease:'none'必須（スクロールと1:1対応させるため）。GSAP CDN（gsap.min.js + ScrollTrigger.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アソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。