Creative Dev Blog

スクロール連動

GSAPで作るスタックカードのスクロールショーケース

ScrollTriggerでカードを重ねながら切り替えていく、縦スクロール型のショーケース演出です。

Y

Yutaka Kizaki

@junkbranding

2026年5月21日

読了時間: 6分

構成 / File Structure

</>Code Viewer

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

<main class="stacked-showcase">
  <section class="stacked-hero">
    <p class="eyebrow">ScrollTrigger / Timeline</p>
    <h1>STACKED<br />SHOWCASE</h1>
    <p class="lead">
      複数カードを積層しながら、スクロールに合わせて主役を切り替えていく構成です。
    </p>
  </section>

<section class="stacked-stage">
    <div class="stage-copy">
      <span class="stage-kicker">Feature Panels</span>
      <h2>縦スクロールの移動量を、そのまま視線誘導に変える</h2>
    </div>

<div class="stacked-cards">
      <article class="stack-card card-a">
        <span class="card-index">01</span>
        <h3>Launch Story</h3>
        <p>大胆な見出しと落ち着いた補足文で、最初の一枚を基準面にします。</p>
      </article>

<article class="stack-card card-b">
        <span class="card-index">02</span>
        <h3>Motion Layer</h3>
        <p>次のカードは少し縮小した状態から入り、切り替わりを明確に見せます。</p>
      </article>

<article class="stack-card card-c">
        <span class="card-index">03</span>
        <h3>Final Focus</h3>
        <p>最後のカードで配色を反転させ、到達点をはっきり印象付けます。</p>
      </article>
    </div>

<div class="progress-rail" aria-hidden="true">
      <span class="progress-fill"></span>
    </div>
  </section>

<section class="stacked-outro">
    <p>
      ScrollTrigger の pin と scrub を組み合わせると、セクション遷移そのものを演出にできます。
    </p>
  </section>
</main>

はじめに

gsap-skills の考え方に沿って、複数ステップの切り替えは単発の to() を並べるより timeline でまとめた方が調整しやすくなります。このサンプルでは、カード3枚をひとつの流れとして管理し、スクロール位置をそのまま進行バーに変えています。

実装のポイント

スクロール全体は ScrollTrigger を付けた timeline で制御する
各カードは yPercent と scale を中心に動かし、レイアウトの再計算を増やさない
pin と scrub で、読ませたい区間を一度止めてから段階的に切り替える
進捗表示も同じタイムラインに載せて、状態の同期を崩さない

使いどころ

機能紹介、料金プランの違い、制作フローの可視化のように、「縦に読む」より「順番に見せる」方が向いている場面で使いやすい構成です。カード枚数を増やす場合も、同じタイムラインへ区間を足していけば管理できます。

タグ

GSAPScrollTriggerJavaScriptCSSアニメーションスクロール

表現タイプから探す

スクロール連動

スクロールに連動する多彩な表現を集めました。

パララックス系

奥行き感や視差効果で没入感を高める表現です。

カード・UIパーツ系

カードやUIパーツのインタラクティブ表現。

テキスト演出系

文字を魅せるための多彩なテキスト表現。

ページ遷移・画面切り替え系

ページやセクションのスムーズな切り替え表現。

ローディング系

読み込みを楽しく魅せるローディング表現。

マウス・インタラクション系

カーソル操作に反応するインタラクティブ表現。

背景・ビジュアル表現系

背景やビジュアルで魅せるダイナミックな表現。

3D・WebGL寄り

WebGLや3Dを活用したリッチな表現カテゴリ。

ボタン・CTA系

CTAやボタンを魅力的にするアニメーション表現。

関連記事

GSAPScrollTriggerアニメーションスクロールストーリーテリング

GSAPで作るスクロール連動ヒーローアニメーション

GSAPとScrollTriggerを使って、スクロールに合わせてダイナミックに動き出すヒーロー表現を実装します。

2026年5月19日

GSAPアニメーションインタラクションUI

カスタムカーソルとマグネットボタンを組み合わせた追従UI

カスタムカーソルの追従とマグネットボタンを合わせて、触りたくなる CTA 体験を作る実験です。

2026年5月19日

GSAPJavaScriptCSSテキストUIアニメーション

GSAPで作るSplitText見出しとCTAバナー演出

SplitText と timeline を使って、見出しとボタンを一体で見せるヒーローバナー演出です。

2026年5月21日