Javascript 使用matchmedia（）在不同断点处使用不同的GSAP时间线

我正在尝试使用

window.matchmedia（）在不同的断点触发不同的GSAP时间线方法

我试图在这里用一个简单的例子来解释我的想法：

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);

想法是让
change
按钮触发每个断点内的动画。但这种方法不起作用。这有可能实现吗

这里还有一个密码笔：
这个问题已经回答了这个问题已经回答了