1

I'm trying to trigger different GSAP timelines at different breakpoints using the window.matchmedia(); method.

I've attempted to put together a simple example here to explain my thinking:

const box = document.querySelector(".box");
const change = document.querySelector(".change");

const mqs = [
  window.matchMedia("(min-width: 600px)"),
  window.matchMedia("(min-width: 768px)"),
  window.matchMedia("(min-width: 1024px)")
];

const tl = gsap.timeline({
  paused: true;
});

if (mqs[0].matches) {
  tl.to(box, { backgroundColor: "green" });
} else if (mqs[1].matches) {
  tl.to(box, { backgroundColor: "pink" });
} else {
  tl.to(box, { backgroundColor: "black" });
}

function playTl() {
  tl.play();
}

change.addEventListener("click", playTl);

The idea is to have the change button trigger the animations within each breakpoint. But this approach isn't working. Is this possible to achieve?

Here's a Codepen also: https://codepen.io/abbasarezoo/pen/94c0b1c73f770d36f1103f615ac3e917

abbas_arezoo
  • 1,038
  • 3
  • 20
  • 38
  • 1
    This question was answered [on the GreenSock forums](https://greensock.com/forums/topic/25629-triggering-different-timelines-at-different-breakpoints-with-matchmedia/) – Zach Saucier Sep 22 '20 at 20:17

0 Answers0