PORTFOLIO & WEB DESIGN MEMORANDOM BLOG   
PORTFOLIO & WEB DESIGN MEMORANDOM BLOG   

【JavaScript】GSAP：SplitTextの使い方

タグ :

GSAPのSplitText は文字アニメーションを作るプラグインです。

1. SplitTextとは？

通常のHTMLテキストはただの1つの塊ですが、SplitTextを使うと次のように自動で分割されます：

• lines（行ごと）
• words（単語ごと）
• chars（文字ごと）

その結果、文字や単語をバラバラに動かすアニメーションが簡単に作れます。

2. 基本的な使い方

インポート

SplitTextは GSAP Club GreenSockの有料プラグイン です。
公式サイトで入手して読み込む必要があります（CDNでは配布されていません）。

  1. <script src="gsap.min.js"></script>
  2. <script src="SplitText.min.js"></script>
  3. <script>
  4.   gsap.registerPlugin(SplitText);
  5. </script>

基本コード

  2. <h1 class="headline">Hello GSAP SplitText</h1>

  2. // テキストを分割
  3. const split = new SplitText(".headline", { type: "chars, words, lines" });
  5. // 文字ごとにアニメーション
  6. gsap.from(split.chars, {
  7.   opacity: 0,
  8.   y: 50,
  9.   stagger: 0.05, // 0.05秒ずつずれて再生
  10.   duration: 1,
  11.   ease: "power2.out"
  12. });

3. SplitTextのオプション

  2. new SplitText(target, {
  3.   type: "chars, words, lines", // 分割の種類
  4.   wordsClass: "myWord", // 各単語に付けるクラス
  5.   charsClass: "myChar", // 各文字に付けるクラス
  6.   linesClass: "myLine" // 各行に付けるクラス
  7. });

• type
• “chars” → 文字単位
• “words” → 単語単位
• “lines” → 行単位
• カンマ区切りで複数指定可能
• charsClass, wordsClass, linesClass
→ それぞれにクラスを付与できるので、CSS制御も可能。

4. よくあるアニメーション例

1. 文字ごとに出現

  2. <!-- HTML -->
  3. <h2 class="title">Hello GSAP SplitText</h2>
  5. <!-- JS -->
  6. <script>
  7.   gsap.registerPlugin(SplitText);
  9.   const splitChars = new SplitText(".title", { type: "chars" });
  11.   gsap.from(splitChars.chars, {
  12.     opacity: 0,
  13.     y: 30,
  14.     stagger: 0.05,
  15.     ease: "back.out",
  16.     duration: 1
  17.   });
  18. </script>

2. 単語ごとにフェードイン

  2. <!-- HTML -->
  3. <h2 class="title">Hello GSAP SplitText</h2>
  5. <!-- JS -->
  6. <script>
  7.   gsap.registerPlugin(SplitText);
  9. <!-- HTML -->
  10. <p class="sentence">SplitText makes text animations so much easier!</p>
  12. <!-- JS -->
  13. <script>
  14.   const splitWords = new SplitText(".sentence", { type: "words" });
  16.   gsap.from(splitWords.words, {
  17.     opacity: 0,
  18.     y: 20,
  19.     stagger: 0.2,
  20.     ease: "power2.out",
  21.     duration: 1
  22.   });
  23. </script>

3. 行ごとにスライドイン

  2. <!-- HTML -->
  3. <p class="paragraph">
  4.   GSAP SplitText allows you<br>
  5.   to animate each line<br>
  6.   individually with ease.
  7. </p>
  9. <!-- JS -->
  10. <script>
  11.   const splitLines = new SplitText(".paragraph", { type: "lines" });
  13.   gsap.from(splitLines.lines, {
  14.     opacity: 0,
  15.     x: -100,
  16.     stagger: 0.3,
  17.     ease: "power3.out",
  18.     duration: 1
  19.   });
  20. </script>

5. まとめ

• SplitTextは文字・単語・行を分割して、個別にアニメーションできるようにするプラグイン
• type: “chars, words, lines” で分割方法を指定
• split.chars / split.words / split.lines をGSAPでアニメーション
• フェードイン、バラバラ出現、行ごとのスライドなど演出の幅が広がる

前ページに戻る
MILMONA   MILMONA   MILMONA   MILMONA   MILMONA   
MILMONA   MILMONA   MILMONA   MILMONA   MILMONA