Chapter 23: gsap.matchMediaRefresh()

Core Idea

gsap.matchMediaRefresh() reverts every currently-matching matchMedia() setup and immediately re-runs whatever matches now, without destroying the matchMedia instances themselves.

Key Concepts

• Non-destructive: doesn't remove the registered mm.add() handlers, just forces a revert-then-reapply cycle for the ones currently matching.
• Use case: reacting to something other than a viewport resize that should still trigger a re-evaluation, e.g. a "reduce motion" toggle in the UI.

Code Examples

// user toggles a "reduce motion" checkbox
reduceMotionCheckbox.addEventListener("change", () => {
  gsap.matchMediaRefresh();
});

• What it demonstrates: manually forcing matchMedia to re-run as if the window had been resized, in response to an unrelated UI event.

Key Takeaways

1. Equivalent conceptually to resizing the window away and back, without an actual resize.
2. Doesn't unregister anything — the same media queries stay wired up for future changes.

Connects To

• gsap.matchMedia(): the instances this method refreshes.