【GSAP】ジーサップ！アニメーションを手際よく作成できるライブラリというより関数！（そしてChatGPT）

そうだ！アニメーション界隈にはあいつがいた！（GSAP！）

かねてよりGSAP（ジーサップ）というアニメーション用のJSライブラリがあることは知っていたし、このサイトのトップページのロゴがノイジーに踊っているアニメーションなんかも、過去にGSAPで作成されたものです。ただ、あまり活かしておりませんでした。

初めてお耳にする方は、あの頃の僕と同じことを思うでしょうか。。GSAP？ってなんだ？うめえのか？新たな格闘家？あ、ガスパニックか！懐かしいよね〜！と。。

最近はライブラリなど使わずとも状況に応じたアニメーションをAIで生成でき、調整は人がやる的に作業することが多いんですが、このGSAPはいうなればアニメーション界隈のTailwindCSS。。（爆速コーディングに向いている）と個人的には思っています。

思い出しがてら、さっそく使ってみたぞ！

で、使い方だな〜と思い、閃きました。こうしたブログサイトやECサイトなどでは、見出しのレベルごとのデザインが全ページに渡って共通であることが定番のため、それを活かして、「見出し文字が踊りながら左から右にかけて出現していく」というアニメーションをGSAPで作り、サイト内の特定クラスの全要素に対して処理することでお手軽にサイト全体のイメージを

このように変えてみまました！

いいですね〜スクロールを逆再生可のオプションに初期状態に戻るアニメーションを入れていると、行きつ戻りつでアニメーションしてくれる。
使いようによっては、Appleのプロモーションサイトにあるようなスクロールでダイナミックにアニメーションが変化していくようなコンテンツも作成できると思える。

AIに紹介させっぞ！

GSAPの簡単な紹介ですが、

GSAPはJavaScriptのアニメーションライブラリで、開発者がHTMLやJavaScriptを使って効果的なアニメーションを作成するのに役立ちます。その優れた特徴として、GSAPは様々なトゥイーンメソッドを提供しています。to(),from(),fromTo(),set()といったメソッドがあり、これらを用いて様々なアニメーション効果を簡単に作成することができます。

また、GSAPはイージング指定を使用することで、アニメーションの進行速度をカスタマイズできます。これにより、開発者はアニメーションの加減速を自由に設定でき、動きにさらなるリアリティを追加することが可能です。

さらに、GSAPはScrollTriggerという機能を備えています。これにより、特定のスクロール位置でアニメーションをトリガーすることができます。これはユーザーのスクロール行動に反応する動的なウェブサイトを作成する際に非常に便利です。

以下のCDNリンクを貼ることで即時使用可能になります。

GSAP CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>

ScrollTrigger CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>

今回このサイト用に作成したコード（GSAP関数使用）

主要jsファイルに以下を追加。

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('h1, h2, h3, h4').forEach(block => {
    let chars = block.textContent.split('').map(char => `${char}`).join('');
    block.innerHTML = chars;
    let spans = block.querySelectorAll('span');
    spans.forEach((span, i) => {
      gsap.timeline({
        scrollTrigger: {
          trigger: block,
          start: 'bottom bottom',
          toggleActions: 'play none none reverse',
          onEnterBack: () => {
            // 逆再生のアニメーションをここに指定
            gsap.to(span, { y: 0, opacity: 0, duration: 0.05, ease: "bounce.out", delay: i * 0.05 });
          },
          onLeaveBack: () => { /* 必要に応じて */ },
        }
      })
      .fromTo(span, { y: 0, opacity: 0 }, { y: -20, opacity: 1, duration: 0.05, ease: "bounce.out", delay: i * 0.05 });
    });
  });
});

見出しのテキストの要素（ h1, h2, h3, h4 ）を、一文字ずつspanで囲み、
htmlを整形してからその各spanにGSAPアニメーションが走るという構造になっています。

主要cssファイルに以下を追加。こちらは見出しをspanで分解したさいに崩れが起こっていたのを整形するものです。

.wp-block-heading span {
  bottom: -20px; /*ベースの位置調整*/
  position: relative; /*ベースの位置調整*/
  display: inline-block;
}

これを追加しただけです！

そして、GSAPのコードももうすでにChatGPTもよく知っており、ChatGPTに「GSAPを用いたアニメーション」として言語で指示しても作成できます！

（なんなら僕のjsが土台はそうやって作成したものです！マジ神すぎる。。。）