kdcsライブラリー

GSAPでもアニメーション動作をレスポンシブ対応させたい場合

※matchMedia()が使えるバージョンは、「3.11.0」以降

ブレークポイントwidth（対象の幅）が以上と以下の2点の例

$(function(){
  let mm = gsap.matchMedia();

  mm.add("(max-width: 1024px)", () => {
    // ここに1024px以下のときのコードを書きます
  });

  mm.add("(min-width: 1025px)", () => {
    // ここに1025px以上のときのコードを書きます
  });

});

ブレークポイントwidth（対象の幅）が3つ以上の場合はそれぞれの幅の指定（上限と下限）が必要

let mm = gsap.matchMedia();

mm.add("(min-width: 600px) and (max-width: 768px)", () => {
  // 600px以上768px以下のときは上下に動かす
  gsap.to(".box", { yPercent: 50, yoyo: true, duration: 1, ease: "none", repeat: -1 });
});

mm.add("(min-width: 769px) and (max-width: 1024px)", () => {
  // 769px以上1024px以下のときは左右に動かす
  gsap.to(".box", { xPercent: 50, yoyo: true, duration: 1, ease: "none", repeat: -1 });
});

mm.add("(min-width: 1025px)", () => {
  // 1025px以上のときは回転させる
  gsap.to(".box", { rotation: 360, duration: 2, ease: "none", repeat: -1 });
});

GSAP(GreenSock Animation Platform) とは、Greensock社が提供する簡単にアニメーションを実装できるJavaScriptのライブラリ

こちらからZipファイルをダウンロード。
ページ内の「Get GSAP↓」をクリックするとZipファイルのダウンロードが始まる。
解凍し、テーマフォルダ内に以下を配置する

gsap.min.js
ScrollTrigger.min.js
setting.js（gsapの設定ファイル：ファイル名は任意）