Creative Dev Blog

テキスト演出系

SplitText CTA Banner

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

Y

Yutaka Kizaki

@junkbranding

2026年5月21日

読了時間: 5分

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

function SplitTextCtaBanner() {
  const rootRef = React.useRef(null)
  const titleRef = React.useRef(null)

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

const context = gsap.context(() => {
      const split = SplitText.create(titleRef.current, {
        type: 'lines,words',
        linesClass: 'line',
        wordsClass: 'word',
      })

const timeline = gsap.timeline({
        defaults: {
          duration: 0.9,
          ease: 'power3.out',
        },
      })

timeline
        .from('.banner-shell', {
          opacity: 0,
          y: 40,
          scale: 0.96,
        })
        .from(
          split.lines,
          {
            yPercent: 110,
            stagger: 0.12,
          },
          '-=0.45'
        )
        .from(
          '.banner-copy',
          {
            opacity: 0,
            y: 28,
          },
          '-=0.45'
        )
        .from(
          '.banner-actions a',
          {
            opacity: 0,
            y: 24,
            stagger: 0.1,
          },
          '-=0.35'
        )
        .from(
          '.orbit',
          {
            scale: 0.7,
            opacity: 0,
            stagger: 0.08,
          },
          '-=0.6'
        )

gsap.to('.orbit-a', {
        rotate: 360,
        duration: 22,
        ease: 'none',
        repeat: -1,
      })

gsap.to('.orbit-b', {
        rotate: -360,
        duration: 18,
        ease: 'none',
        repeat: -1,
      })

gsap.to('.orbit-c', {
        scale: 1.08,
        opacity: 0.45,
        duration: 2.8,
        repeat: -1,
        yoyo: true,
        ease: 'sine.inOut',
      })

return () => split.revert()
    }, rootRef)

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

return (
    <section ref={rootRef} className="banner-shell">
      <div className="banner-noise" />
      <div className="banner-inner">
        <p className="banner-kicker">SplitText / Timeline</p>
        <h1 ref={titleRef} className="banner-title">MAKE MOTION FEEL EDITORIAL</h1>
        <p className="banner-copy">
          見出し、本文、CTA を別々に動かすのではなく、ひとつの流れとして設計したバナーです。
        </p>

<div className="banner-actions">
          <a className="primary-action" href="#">Start a Project</a>
          <a className="secondary-action" href="#">See Archive</a>
        </div>

<div className="banner-orbits" aria-hidden="true">
          <span className="orbit orbit-a"></span>
          <span className="orbit orbit-b"></span>
          <span className="orbit orbit-c"></span>
        </div>
      </div>
    </section>
  )
}

はじめに

自分用メモ。

このバナーは見出し単体ではなく、本文と CTA までを同じ拍で出すのが肝。順番を持つ演出はやはり timeline にまとめた方が崩れにくい。

組み合わせのポイント

SplitText の行アニメーションを主役にして、本文と CTA は少し遅らせて追従させる
背景の軌道は主役のタイムラインと分離して、画面の空気だけを支える役にする
見出しは強く、CTA は遅らせて、視線の着地点を最後に作る
バナー全体の立ち上がりと内部要素の順番を分けて、入りの密度を整える

実装のポイント

見出しは SplitText で分割し、単語よりまず行単位の見え方を整える
初期表示は opacity と transform を中心にし、レイアウトを崩さずに立ち上げる
CTA は本文より少し遅らせて出し、視線の着地点を明確にする
背景の軌道は別 tween に分け、主役のタイムラインを汚さない

使いどころ

使いどころのメモとしては、短い文量でも温度感を出したい冒頭ブロック向け。文言を差し替えても成立しやすいので、型として残しておく。

タグ

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

表現タイプから探す

スクロール連動

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

パララックス系

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

カード・UIパーツ系

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

テキスト演出系

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

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

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

ローディング系

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

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

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

背景・ビジュアル表現系

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

3D・WebGL寄り

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

ボタン・CTA系

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

関連記事

GSAPアニメーションテキスト

Split Text Gradient Wave

文字分割アニメーションとグラデーションテキストを重ねて、見出しだけで空気感を作る表現です。

2026年5月19日

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

Stacked Cards Showcase

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

2026年5月21日

GSAPアニメーションUI

Particle Glass Background Shift

背景のパーティクルアニメーションとガラス風パネルを重ねて、情報面を際立たせるビジュアル表現です。

2026年5月19日