Chapter 363: ScrollTrigger.matchMedia

Core Idea

in favor of gsap.matchMedia() in 3.11.0+

Key Concepts

• vars: Object

• Manually set up your own window.matchMedia() functionality, handlers, etc.
• Manually kill() each ScrollTrigger that doesn't apply to the new size. That means either keeping track of them in an Array or using ScrollTrigger.getAll().
• Make sure things get reverted to their pre-pinned, pre-ScrollTrigger state before creating new ScrollTriggers so that they aren't contaminated. For example, if you had something pinned, it must get unpinned and put back into the normal document flow so that your CSS rules affect it properly.

Code Examples

ScrollTrigger.matchMedia({
  // large
  "(min-width: 960px)": function () {
    // setup animations and ScrollTriggers for screens 960px wide or greater...
    // These ScrollTriggers will be reverted/killed when the media query doesn't match anymore.
  },

  // medium
  "(min-width: 600px) and (max-width: 959px)": function () {
    // The ScrollTriggers created inside these functions are segregated and get
    // reverted/killed when the media query doesn't match anymore.
  },

  // small
  "(max-width: 599px)": function () {
    // The ScrollTriggers created inside these functions are segregated and get
    // reverted/killed when the media query doesn't match anymore.
  },

  // all
  all: function () {
    // ScrollTriggers created here aren't associated with a particular media query,
    // so they persist.
  },
});

• What it demonstrates: typical usage of ScrollTrigger.matchMedia in a GSAP animation.

Key Takeaways

1. vars: Object

2. Manually set up your own window.matchMedia() functionality,…
3. Manually kill() each ScrollTrigger that doesn't apply to the new size.
4. Make sure things get reverted to their pre-pinned, pre-ScrollTrigger state before creating new ScrollTriggers so that they aren't…

Connects To

• gsap.matchMedia(): see ch022 — gsap.matchMedia()
• kill(): see ch340 — .kill
• ScrollTrigger.getAll(): see ch357 — ScrollTrigger.getAll
• ScrollTrigger.saveStyles(): see ch370 — ScrollTrigger.saveStyles