一文字ずつ大きくなるテキスト

スクロールして指定の位置に来たら、ポポポと文字が一つづつ大きくなって表示される、かわいいアニメーションをつけます。

1. クラス「pop-text」を見出しウィジットにつけ、HTMLタグは「H2」とする。

2. 以下のJSを入れる

（このコードの上にGSAP読み込みコードを入れてください。）

HTML

<script>
document.addEventListener('DOMContentLoaded', function() {
  gsap.registerPlugin(ScrollTrigger);

  // --- pop text ---
  const titles = document.querySelectorAll('.pop-text h2'); /* h2以外はここを書き換え */

  titles.forEach(title => {
    const text = title.textContent;
    title.textContent = '';

    text.split('').forEach(char => {
      const span = document.createElement('span');
      span.textContent = char;
      if (char === ' ') {
        span.style.whiteSpace = 'pre';
      }
      span.style.display = 'inline-block'; 
      title.appendChild(span);
    });

    const chars = title.querySelectorAll('span');

    gsap.fromTo(chars, 
      { opacity: 0, scale: 0 },
      {
        opacity: 1,
        scale: 1,
        duration: 0.4,
        ease: "back.out(1.7)",
        stagger: 0.05,
        scrollTrigger: {
          trigger: title,
          start: "top 80%",
        }
      }
    );
  });

});
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
  gsap.registerPlugin(ScrollTrigger);

  // --- pop text ---
  const titles = document.querySelectorAll('.pop-text h2'); /* h2以外はここを書き換え */

  titles.forEach(title => {
    const text = title.textContent;
    title.textContent = '';

    text.split('').forEach(char => {
      const span = document.createElement('span');
      span.textContent = char;
      if (char === ' ') {
        span.style.whiteSpace = 'pre';
      }
      span.style.display = 'inline-block'; 
      title.appendChild(span);
    });

    const chars = title.querySelectorAll('span');

    gsap.fromTo(chars, 
      { opacity: 0, scale: 0 },
      {
        opacity: 1,
        scale: 1,
        duration: 0.4,
        ease: "back.out(1.7)",
        stagger: 0.05,
        scrollTrigger: {
          trigger: title,
          start: "top 80%",
        }
      }
    );
  });

});
</script>