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

Car driving speed motion photo GSAP
GSAP

そうだ!アニメーション界隈にはあいつがいた!(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が土台はそうやって作成したものです!マジ神すぎる。。。)

Webサイト制作を依頼したい方へ

PRYTHM WORKS(プリズムワークス)は、東京都墨田区、東京スカイツリーのふもとにあるWebコンテンツ制作事務所です。

華々しいおしゃれなECサイトをはじめ、アンダーグラウンドな案件まで幅広くご依頼をいただき、どんな案件でも真心・丁寧・楽しくを理念に掲げて制作しております!

作りたいサービスはあるけど、まずは費用感が知りたい!という方も、まずはお問い合わせください!

mail@prytymworks.tokyo

PRYTHM WORKSが手掛ける仕事の一部をご紹介します。

制作のご依頼者様用 費用かんたんお見積もりフォーム

おそらく本記事を読まれるのは、制作の現場の、法人またはフリーの、プロデューサーの方、ディレクターの方、エンジニアの方がほとんどかと存じます。
いつもおつかれさまです!そして本記事をお読みいただきありがとうございます。
紹介した記事の内容について、またはその他制作のご依頼について、以下のフォームより簡易お見積もりができます!
試算だけならフォーム送信しなくてもできますので、ぜひ試しにいかがでしょう?

お仕事をご希望の制作者様用 お問合せフォーム

また、まずはライトなご相談から…ということであれば、こちらのコンタクトフォームからお気軽にどうぞ!ご縁を大切にしてご返信いたします!

    タイトルとURLをコピーしました