GSAPのアニメーションですが、パソコンとスマホなど画面幅によって変えたい場合があるかと思います。
今回はGSAPのmatchMediaという機能を使った実装方法を解説します。
GSAPを使ったことがないという人は以下の記事を参照下さい。
GSAPとは?基本的な使い方とアニメーションのサンプル付きで解説
続きを見る
- 完全無料
- 30日間でWeb制作を学べる
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 毎日人数制限ありの先着制
(有料になっていたらすいません🙇♂️)
GSAPのmatchMediaでレスポンシブ対応(PCとスマホ表示切り替え)をする方法
早速ですが、コードはこちらになります。
ScrollTrigger.matchMedia({
// 960px以上のメディアクエリに対するアニメーション設定
"(min-width: 960px)": function () {
// アニメーションの指定
},
// 600px以上959px以下のメディアクエリに対するアニメーション設定
"(min-width: 600px) and (max-width: 959px)": function () {
// アニメーションの指定
},
// 599px以下のメディアクエリに対するアニメーション設定
"(max-width: 599px)": function () {
// アニメーションの指定
},
// メディアのサイズに関係なく、すべてのメディアに適用するアニメーション設定
"all": function () {
// アニメーションの指定
},
});
pxはご自身の環境に合わせて変更して下さい。
また画面幅で判別しているので、デバイスの種類で判別しているわけではありません。
PCとスマホ表示切り替えのアニメーションサンプル
先ほどのコードを使ったサンプルをご紹介します。
コードはこちらです(CSSは重要ではないので割愛します)
<div class="container">
<div class="box pc">パソコン表示</div>
<div class="box sp">スマホ表示</div>
</div>
ScrollTrigger.matchMedia({
// 600px以上のメディアクエリに対するアニメーション設定
"(min-width: 600px)": function () {
gsap.to(".pc", { // PCで表示させたい要素のclass
scale: 1.3, // 縦横1.3倍
backgroundColor: "#ffb6c1", // 背景色
borderRadius: "50%", // 正円
duration: 1, // 1秒間アニメーション
ease: "elastic.out(1, 0.3)", // イージング
repeat: -1, // リピート無限
yoyo: true, // リピートで順方向と逆方向を繰り返す
});
},
// 400px以下のメディアクエリに対するアニメーション設定
"(max-width: 400px)": function () {
gsap.to(".sp", { // スマホで表示させたい要素のclass
scale: 1.3, // 縦横1.3倍
backgroundColor: "#3cb371", // 背景色
borderRadius: "50%", // 正円
duration: 1, // 1秒間アニメーション
ease: "elastic.out(1, 0.3)", // イージング
repeat: -1, // リピート無限
yoyo: true, // リピートで順方向と逆方向を繰り返す
});
},
});
上が画面幅600px以上のアニメーション、下が画面幅400px以下のアニメーションとなります。
アニメーション自体の内容は背景色以外は同じです。
以下のサンプルで左上のHTML・CSS・JSのどれかをクリックすると画面幅が変わるので、広い時は『パソコン表示』、狭い時は『スマホ表示』がアニメーションするのを確認してみて下さい。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
まとめ
今回はGSAPのmatchMedia機能を使ったレスポンシブ対応の方法を解説しました。
minとmax、あとは数値の書き間違いだけ気を付ければ特に難しくないと思います。
以上になります。