GSAP

GSAP でビューポートに応じて処理を分けているケースで、適用された style をリサイズ時にリセットする

March 12, 2026

GSAP の MatchMedia.add() を使えば、特定のメディアクエリにマッチしたときに実行したい処理を書ける。add() メソッドのセカンドパラメータに渡すコールバックで cleanup code を返すことができ、このコードはメディアのマッチが変更になったときに実行される。

const mm = gsap.matchMedia()
 
mm.add('(min-width: 800px)', () => {
  const tween = gsap.to('.box', { x: 200, opacity: 1 })
 
  return () => {
    tween.revert()
    // or
    // gsap.set('.box', { clearProps: 'all' })
  }
})
reference
back to note