カテゴリー
お問い合わせ

【GSAP】スマホとPCで動きを切り替える！matchMedia()を使ったレスポンシブアニメーション術

GSAP
目次

GSAPを使ってWebサイトにリッチなアニメーションを実装する際、「PCでは要素を横からスライドさせたいけど、スマホでは縦方向にフェードインさせたい」といったように、画面幅（デバイス）によってアニメーションの動きを変えたい場面は非常によくあります。

もちろん素のJavaScriptで window.matchMedia を使うこともできますが、コードが複雑になりがちです。 そこで活躍するのが、GSAPに標準で用意されている gsap.matchMedia() メソッドです！

これを使えば、CSSの @media クエリと全く同じような書き方で、JavaScript側でも画面幅に応じたアニメーションの切り替えが非常にシンプルに実装できます。 今回は、絶対に役立つ matchMedia() の基本的な使い方を、簡単なデモを交えてご紹介します！

デモ動作

See the Pen GSAPのmatchMedia()機能 by mikanbako (@mikanbako) on CodePen.

全画面でのデモ動作は以下のリンクからご確認下さい！（別タブで開かれます）

実装コードの紹介

【HTML】

<div class="l-wrap">
  <p class="p-text">画面幅を変えて、アニメーションの違いを確認してみてください！</p>
  <!-- アニメーションさせる対象の箱 -->
  <div class="p-box js-box">GSAP</div>
</div>

【CSS】

/* ベースの装飾 */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden; /* 横スクロール防止 */
}

.l-wrap {
  text-align: center;
}

.p-text {
  font-weight: bold;
  color: #3e3e3e;
  margin-bottom: 40px;
}

/* アニメーションさせる箱のデザイン */
.p-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background-color: #1bb4d4;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(27, 180, 212, 0.3);
}

【JavaScript】

// gsap.matchMedia() のインスタンスを作成
const mm = gsap.matchMedia();

// ターゲットとなる要素を取得
const box = document.querySelector('.js-box');

// メディアクエリごとの条件分岐を設定
mm.add({
  // ブレイクポイントの定義（CSSと同じ書き方でOK！）
  isPc: "(width >= 768px)", // 768px以上（PC・タブレット）
  isSp: "(width < 768px)"  // 767px以下（スマホ）
}, (context) => {
  // context.conditions に、現在のマッチ状況が boolean で入る
  let { isPc, isSp } = context.conditions;

  // 画面幅に応じたアニメーションを定義
  if (isPc) {
    // 【PCサイズの場合】 横（X軸）に移動しながら回転するアニメーション
    gsap.to(box, {
      x: 200,
      rotation: 360,
      duration: 2,
      ease: "power2.out",
      repeat: -1, // 無限ループ
      yoyo: true  // 往復させる
    });
  }

  if (isSp) {
    // 【スマホサイズの場合】 縦（Y軸）に移動しながら角丸になるアニメーション
    gsap.to(box, {
      y: 100,
      borderRadius: "50%",
      backgroundColor: "#c72c4c", // スマホの時は色も変えてみる
      duration: 2,
      ease: "power2.out",
      repeat: -1,
      yoyo: true
    });
  }

  // クリーンアップ関数（ブレイクポイントを跨いで切り替わった時に実行される）
  return () => {
    // アニメーションのリセット処理などを記述できます（今回はGSAP側で自動管理されるため省略可）
  };
});

コードの解説・こだわったポイント

CSSライクな直感的な条件指定

mm.add() の第一引数にオブジェクト形式でブレイクポイントを定義します。 "(width >= 768px)" のように、普段CSSで書いているメディアクエリの文字列をそのまま使えるため、学習コストが低く直感的に記述できます。

リサイズ時の自動クリーンアップ機能

gsap.matchMedia() の最大のメリットは、「画面幅が変わって条件から外れた時に、設定していたアニメーションやインラインスタイルを自動的にリセット（クリーンアップ）してくれる」という点です。

もし通常の window.matchMedia で独自に実装した場合、PC用のアニメーションによって付与された transform: translate() などのスタイルが、スマホサイズになっても要素に残ってしまい、レイアウト崩れの原因になることがよくあります。 GSAPに任せることで、こういった面倒なリセット処理を自動で行ってくれるため、非常に安全かつ効率的にレスポンシブ対応が可能です。

補足：公式ドキュメント

より詳しい仕様や最新の対応状況については、以下の公式ドキュメントをご参照ください。

・GSAP: gsap.matchMedia()

まとめ

今回は、GSAPの matchMedia() を使用して、画面幅（デバイス）に応じてアニメーションを切り替えるモダンな実装方法をご紹介しました。

昨今のWeb制作では、PCとスマートフォンでレイアウトや見せ方が大きく異なるのが当たり前になっています。 そのため、「ただ動かす」だけでなく、「ユーザーが見ている画面サイズにとって一番心地よいアニメーションは何か？」を常に考え、デバイスごとに最適なUXを提供できるフロントエンドエンジニアでありたいと思います。

Prev
Next

関連記事