Creative Dev Blog

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

Outfit Landing Reveal React

Codegrid風のアウトフィットLPリビールを、GSAP + Reactで安全に再構築したプリローダー演出です。

Y

Yutaka Kizaki

@junkbranding

2026年6月19日

読了時間: 7分

構成 / 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

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

function CodegridOutfitLandingReveal() {
  const rootRef = React.useRef(null)
  const counterRef = React.useRef(null)

const navItems = ['Index', 'Collection', 'Material', 'Process', 'Info']
  const footerWords = ['Permanence', 'Craftsmanship', 'Expression']

const images = [
    'https://images.unsplash.com/photo-1554412933-514a83d2f3c8?auto=format&fit=crop&w=1000&q=80',
    'https://images.unsplash.com/photo-1521572267360-ee0c2909d518?auto=format&fit=crop&w=1000&q=80',
    'https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?auto=format&fit=crop&w=1000&q=80',
    'https://images.unsplash.com/photo-1483985988355-763728e1935b?auto=format&fit=crop&w=1000&q=80',
    'https://images.unsplash.com/photo-1551232864-3f0890e580d9?auto=format&fit=crop&w=1000&q=80',
    'https://images.unsplash.com/photo-1469334031218-e382a71b716b?auto=format&fit=crop&w=1000&q=80',
  ]

React.useEffect(() => {
    gsap.registerPlugin(CustomEase, SplitText)

CustomEase.create('hop', '0.8, 0, 0.2, 1')
    CustomEase.create('hop2', '0.9, 0, 0.1, 1')

const splitInstances = []
    const splitText = (selector, type, className, mask = true) => {
      const split = SplitText.create(selector, {
        type,
        [`${type}Class`]: className,
        ...(mask && { mask: type }),
      })
      splitInstances.push(split)
      return split
    }

const context = gsap.context(() => {
      splitText('.archive-preloader-header h1', 'chars', 'char')
      splitText('.archive-nav a', 'words', 'word')
      splitText('.archive-header h1', 'chars', 'char', false)
      splitText('.archive-hero-footer p', 'words', 'word')

const preloaderImgInitRotations = [7.5, -2.5, -10, 12.5, -5, 5]
      gsap.set('.archive-preloader-img', {
        rotate: (index) => preloaderImgInitRotations[index],
      })

const timeline = gsap.timeline({ delay: 0.5 })

timeline.to('.archive-preloader-img', {
        scale: 1,
        clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',
        duration: 1,
        ease: 'hop',
        stagger: 0.2,
      })

timeline.to(
        '.archive-preloader-header h1 .char',
        {
          y: '0%',
          duration: 1,
          ease: 'hop2',
          stagger: { each: 0.125, from: 'random' },
        },
        '0.35'
      )

timeline.to(
        '.archive-preloader-counter p',
        {
          y: '0%',
          duration: 1,
          ease: 'hop2',
          onStart: () => {
            const counter = { value: 0 }
            gsap.to(counter, {
              value: 100,
              duration: 2,
              delay: 0.5,
              ease: 'power2.inOut',
              onUpdate: () => {
                if (!counterRef.current) return
                counterRef.current.textContent = String(Math.round(counter.value)).padStart(3, '0')
              },
            })
          },
        },
        '<'
      )

timeline.to(
        '.archive-preloader-counter p',
        {
          y: '-100%',
          duration: 0.75,
          ease: 'hop2',
        },
        3.25
      )

timeline.to(
        '.archive-preloader-header h1 .char',
        {
          y: '-100%',
          duration: 0.75,
          ease: 'hop2',
          stagger: { each: 0.125, from: 'random' },
        },
        3.25
      )

timeline.to(
        '.archive-preloader-images .archive-preloader-img',
        {
          scale: 0,
          clipPath: 'polygon(20% 20%, 80% 20%, 80% 80%, 20% 80%)',
          duration: 1,
          ease: 'hop2',
          stagger: -0.075,
        },
        3.5
      )

timeline.to(
        '.archive-preloader',
        {
          clipPath: 'polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)',
          duration: 1,
          ease: 'hop2',
        },
        4.35
      )

timeline.to(
        '.archive-header h1 .char',
        {
          y: '0%',
          duration: 1,
          ease: 'hop',
          stagger: { each: 0.075, from: 'random' },
        },
        4.65
      )

timeline.to(
        '.archive-nav a .word',
        {
          y: '0%',
          duration: 1,
          ease: 'hop',
          stagger: 0.075,
        },
        4.75
      )

timeline.to(
        '.archive-hero-footer p .word',
        {
          y: '0%',
          duration: 1,
          ease: 'hop',
          stagger: 0.075,
        },
        4.75
      )
    }, rootRef)

return () => {
      context.revert()
      splitInstances.forEach((instance) => instance.revert())
    }
  }, [])

return (
    <section ref={rootRef} className="archive-landing">
      <div className="archive-preloader">
        <div className="archive-preloader-images" aria-hidden="true">
          {images.map((src, index) => (
            <div className="archive-preloader-img" key={src + index}>
              <img src={src} alt="" />
            </div>
          ))}
        </div>

<div className="archive-preloader-header">
          <h1>Archive</h1>

<div className="archive-preloader-counter">
            <p ref={counterRef}>000</p>
          </div>
        </div>
      </div>

<section className="archive-hero">
        <div className="archive-header">
          <h1>JUNKBRANDING</h1>
        </div>

</section>
    </section>
  )
}

📝 はじめに

このデモは、ファッションLPでよく使われる、プリローダーからヒーローへ切り替える導入演出です。

複合ランディング演出記事と重複しないよう、今回は「中央1ビジュアルの拡張」ではなく、「画像スタック + タイポ分割 + カウンター進行」を主役にしています。

🎯 今回作るもの

主役: SplitTextで分割した文字の上下リビール
トリガー: 初回表示
対象要素: プリローダー画像群、見出し文字、ナビ文字、フッターワード
再利用先: ブランドサイトのファーストビュー、ポートフォリオ導入、キャンペーンLP

🧩 コンポーネント設計

Reactの責務: マークアップ、データ配列、ref管理
GSAPの責務: 時間制御、stagger、counter更新、退出アニメーション
CSSの責務: レイヤー構造、初期状態、クリップ形状、レスポンシブ調整

🛠️ 実装のポイント

gsap.context() を使って、対象範囲をコンポーネント配下に限定
SplitText のインスタンスを配列で保持して、アンマウント時に revert()
カウンターはDOMを直接参照せず、counterRef 経由で更新
画像を配列レンダリングにして、静的HTMLから再利用可能なReact構成へ変更

🔁 カスタムしやすいパラメータ

preloaderImgInitRotations: 画像ごとの初期角度
stagger 値: 文字や画像の連なり速度
timeline の開始オフセット: 各セクションの見せ場タイミング
clip-path 形状: より直線的な開閉、または有機的なマスクへ変更可能

✅ まとめ

このパターンは、見た目のインパクトを保ちながら、構造は「配列 + SplitText + timeline」に分解できるため、実務で別ブランドに横展開しやすい導入演出です。

タグ

GSAPReactSplitTextプリローダーアニメーションUIUX

表現タイプから探す

スクロール連動

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

パララックス系

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

カード・UIパーツ系

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

テキスト演出系

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

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

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

ローディング系

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

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

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

背景・ビジュアル表現系

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

3D・WebGL寄り

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

ボタン・CTA系

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

関連記事

ReactGSAPアニメーショントランジションUI

Grid Shutter Image Transition React

画像ビューの切り替え時に、格子状のセルを横方向へ閉じて開くシャッター遷移です。

2026年6月9日

GSAPCSSJavaScriptアニメーショントランジションストーリーテリング

Steelworks Landing Page Reveal

プリローダー、カード整列、中央ビジュアル拡張の流れを記事化しました。

2026年5月20日

GSAPアニメーショントランジションUI

Masked Page Transition Showcase

オーバーレイのマスク拡張とコンテンツのスライドインを組み合わせた、ページ遷移風の演出です。

2026年5月19日