GSAP3で新しい機能が追加されました。

ついにGSAPでメディアクエリが使用できるになったので、今回はその紹介をしたいと思います。
使い方はとても直感的です。

gsap.matchMedia()の使い方

let mm = gsap.matchMedia();

mm.add("(min-width: 800px)", () => {
  // desktop setup code here...
});

mm.add("(max-width: 799px", () => {
  // mobile setup code here...
});

コード見るだけでもとてもわかりやすいですよね。

他にもこんな書き方もできちゃいます。
Reactに書き慣れている方やモダンなJSを書き慣れてる方からしたら三項演算子ですっきり書けちゃうのもいいですよね。

let mm = gsap.matchMedia(),
    breakPoint = 800;

mm.add({
  isDesktop: `(min-width: ${breakPoint}px)`,
  isMobile: `(max-width: ${breakPoint - 1}px)`,
  reduceMotion: "(prefers-reduced-motion: reduce)"

}, (context) => {

  let { isDesktop, isMobile, reduceMotion } = context.conditions;

  gsap.to(".box", {
    rotation: isDesktop ? 360 : 180, 
    duration: reduceMotion ? 0 : 2
  });

  return () => { 
  }
}); 

自分も案件で使ってみようかなと思います！
スマホで挙動変えたい時とかすごくありそうですからね〜
詳しくは公式のドキュメントをご覧ください。
https://greensock.com/docs/v3/GSAP/gsap.matchMedia()