GSAPを使ってみる

アニメーションの実装ができるJavaScriptライブラリのGSAPについて、使い方などをメモ。

ライセンスについて

GSAPは基本的な利用は無料ですが、利用条件によっては有料プランが必要になります。
詳細は公式サイトのPricingやLicensingのページを確認いただければと思いますが、大まかには以下のような場合に必要なようです。

• ウェブサイトやゲーム・アプリ・テーマなど、制作物の利用やアクセスに料金が必要な場合
  • 例として、有料会員ページ内でGSAPを使用している場合など
• 複数のエンドユーザーに販売される製品で使用する場合
  • 例として、GSAPを利用したテーマやテンプレートを販売している場合など
• 一部の有料のプラグインを使用する場合

サンプルコード

実際にGSAPの設定を試してみます。
今回はCDNを使ってGSAPの読み込みを行います。

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/gsap.min.js"></script>

HTMLにアニメーションさせる要素を配置します。

<div class="box"></div>

簡単なアニメーションの設定を行ってみます。

document.addEventListener('DOMContentLoaded', () => {
  gsap.to(".box", {
    rotation: 27, // 角度 27度
    x: 100, // x方向 100px
    duration: 1 // 1秒のアニメーション
  });
});

to()メソッドの場合、アニメーション終了時の値を定義する形になります。
to()メソッドのデモページ

from()メソッドの場合、アニメーション開始時の値を定義します。

document.addEventListener('DOMContentLoaded', () => {
  gsap.from(".box", {
    rotation: 27, // 角度 27度
    x: 100, // x方向 100px
    duration: 1 // 1秒のアニメーション
  });
});

from()メソッドのデモページ

開始と終了の両方を値を定義したい場合、fromTo()メソッドを使用します。

document.addEventListener('DOMContentLoaded', () => {
  gsap.fromTo(".box", {
    rotation: 45, // 角度 45度
    x: 100 // x方向 100px
  }, {
    rotation: 120, // 角度 120度
    x: 300, // x方向 300px
    duration: 1 // 1秒のアニメーション
  });
});

fromTo()メソッドのデモページ

アニメーションを繰り返したい場合、repeatを使用します。

document.addEventListener('DOMContentLoaded', () => {
  gsap.to(".box", {
    rotation: 27, // 角度 27度
    x: 100, // x方向 100px
    duration: 1, // 1秒のアニメーション
    repeat: -1 // 無限ループ
  });
});

アニメーションを繰り返すデモページ

アニメーションを繰り返す際に往復する形にしたい場合、合わせてyoyoを設定します。

document.addEventListener('DOMContentLoaded', () => {
  gsap.to(".box", {
    rotation: 27, // 角度 27度
    x: 100, // x方向 100px
    duration: 1, // 1秒のアニメーション
    repeat: -1, // 無限ループ
    yoyo: true // アニメーションの往復
  });
});

アニメーションを往復で繰り返すデモページ

上記のようなシンプルなアニメーション(Tween)の他に、複数の動きを合わせたタイムライン(Timeline)もあります。

document.addEventListener('DOMContentLoaded', () => {
  let tl = gsap.timeline();
  tl
    .to(".box", {
      x: 100, // x方向 100px
      duration: 2 // 2秒のアニメーション
    })
    .to(".box", {
      y: 200, // y方向 200px
      duration: 1 // 1秒のアニメーション
    })
    .to(".box", {
      rotation: 360, // 角度 180度
      duration: 3 // 3秒のアニメーション
    });
});

timeline()のデモページ

タイムライン内のアニメーションのタイミングを調整することもできます。

document.addEventListener('DOMContentLoaded', () => {
  let tl = gsap.timeline();
  tl
    .to(".box", {
      x: 100, // x方向 100px
      duration: 2 // 2秒のアニメーション
    })
    .to(".box", {
      y: 200, // y方向 200px
      duration: 1 // 1秒のアニメーション
    }, "+=2") // 開始を2秒遅らせる
    .to(".box", {
      rotation: 360, // 角度 180度
      duration: 3 // 3秒のアニメーション
    }, 2); // タイムラインの開始から2秒後に開始
});

この場合、2つ目の下に移動するアニメーションを2秒遅らせ、3つ目の回転するアニメーションを最初から2秒の時点で開始するような設定になります。
timeline()のタイミング調整のデモページ

任意のタイミングで停止や再実行、逆再生などを行うこともできます。

<div class="box"></div>
<button class="pause">pause()</button>
<button class="play">play()</button>
<button class="restart">restart()</button>
<button class="reverse">reverse()</button>
<button class="seek">seek(3)</button>

document.addEventListener('DOMContentLoaded', () => {
  let tl = gsap.timeline();
  tl
    .to(".box", {
      x: 100, // x方向 100px
      duration: 2 // 2秒のアニメーション
    })
    .to(".box", {
      y: 200, // y方向 200px
      duration: 1 // 1秒のアニメーション
    })
    .to(".box", {
      rotation: 360, // 角度 180度
      duration: 3 // 3秒のアニメーション
    });

  document.querySelector('.pause').addEventListener('click', () => {
    tl.pause();
  });
  document.querySelector('.play').addEventListener('click', () => {
    tl.play();
  });
  document.querySelector('.restart').addEventListener('click', () => {
    tl.restart();
  });
  document.querySelector('.reverse').addEventListener('click', () => {
    tl.reverse();
  });
  document.querySelector('.seek').addEventListener('click', () => {
    tl.seek(3);
  });
});

アニメーションを制御するデモページ

最後にGSAPのプラグイン(ScrollTrigger)の使用を試してみます。
CDNでの読み込みを追加します。

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/ScrollTrigger.min.js"></script>

ScrollTriggerの設定を追加します。

document.addEventListener('DOMContentLoaded', () => {
  gsap.to(".box", {
    scrollTrigger: '.box', // .boxがビューポートに入るとアニメーションを開始
    rotation: 27, // 角度 27度
    x: 100, // x方向 100px
    duration: 1 // 1秒のアニメーション
  });
});

これで対象要素(.box)がビューポートに入るとアニメーションを開始するようになりました。
ScrollTriggerのデモページ