Creative Dev Blog

スクロール連動

Stacked Cards Showcase

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

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

function StackedCardsShowcase() {
  const rootRef = React.useRef(null)
  const cards = [
    {
      className: 'card-a',
      index: '01',
      title: 'Launch Story',
      body: '大胆な見出しと落ち着いた補足文で、最初の一枚を基準面にします。',
    },
    {
      className: 'card-b',
      index: '02',
      title: 'Motion Layer',
      body: '次のカードは少し縮小した状態から入り、切り替わりを明確に見せます。',
    },
    {
      className: 'card-c',
      index: '03',
      title: 'Final Focus',
      body: '最後のカードで配色を反転させ、到達点をはっきり印象付けます。',
    },
  ]

React.useEffect(() => {
    gsap.registerPlugin(ScrollTrigger)

const context = gsap.context(() => {
      const cardElements = gsap.utils.toArray('.stack-card')
      const progressFill = document.querySelector('.progress-fill')
      const stage = document.querySelector('.stacked-stage')

gsap.set(cardElements, {
        yPercent: index => index * 8,
        scale: index => 1 - index * 0.05,
        rotate: index => index * -2,
        transformOrigin: '50% 100%',
      })

const timeline = gsap.timeline({
        defaults: { ease: 'none' },
        scrollTrigger: {
          trigger: stage,
          start: 'top top',
          end: '+=220%',
          pin: true,
          scrub: true,
          anticipatePin: 1,
        },
      })

timeline
        .to(cardElements[0], { yPercent: -18, scale: 0.88, rotate: -5 }, 0)
        .to(cardElements[1], { yPercent: 0, scale: 1, rotate: 0 }, 0)
        .to(cardElements[2], { yPercent: 16, scale: 0.92, rotate: -3 }, 0)
        .to(cardElements[1], { yPercent: -16, scale: 0.9, rotate: -4 }, 1)
        .to(cardElements[2], { yPercent: 0, scale: 1, rotate: 0 }, 1)
        .to(progressFill, { scaleX: 1, ease: 'none' }, 0)

gsap.from('.stage-copy > *', {
        opacity: 0,
        y: 32,
        duration: 0.9,
        stagger: 0.12,
        ease: 'power3.out',
        scrollTrigger: {
          trigger: '.stacked-hero',
          start: 'bottom 70%',
        },
      })
    }, rootRef)

return () => context.revert()
  }, [])

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

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

<div className="stacked-cards">
          {cards.map(card => (
            <article key={card.index} className={`stack-card ${card.className}`}>
              <span className="card-index">{card.index}</span>
              <h3>{card.title}</h3>
              <p>{card.body}</p>
            </article>
          ))}
        </div>

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

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

はじめに

自分用メモ。

カードの切り替えは単発の to() を並べるより、やはり timeline で持った方が調整しやすい。3枚をひとつの流れとして扱い、進行バーまで同期させる構成として覚えておく。

組み合わせのポイント

カードの積層感、固定スクロール、進行バーを同じ流れの中で見せる
手前と奥のカードで scale と yPercent に差をつけて、入れ替わりを明確にする
pin 区間を使って読ませる時間を確保し、普通の縦スクロールとの差を作る
進行バーを同じ timeline に載せて、状態変化の目印を揃える

実装のポイント

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

使いどころ

使いどころのメモとしては、機能紹介やフロー可視化みたいに順番で見せたい場面向け。カード枚数を増やすときも、同じタイムラインに区間を足す前提で考える。

タグ

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

表現タイプから探す

スクロール連動

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

パララックス系

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

カード・UIパーツ系

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

テキスト演出系

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

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

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

ローディング系

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

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

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

背景・ビジュアル表現系

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

3D・WebGL寄り

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

ボタン・CTA系

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

関連記事

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

Scroll Hero

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

2026年5月19日

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

Cursor Magnet Trail

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

2026年5月19日

ReactCSSアニメーションギャラリーUIインタラクション

Studio Dialect Image Gallery React

スタジオ作品の画像を、Reactの選択状態とCSSトランジションで切り替える編集的なイメージギャラリーです。

2026年6月23日