使用matchmedia在不同的断点使用不同的GSAP时间轴

如何解决使用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按钮触发每个断点内的动画。但是这种方法行不通。这有可能实现吗？

这里也是Codepen：https://codepen.io/abbasarezoo/pen/94c0b1c73f770d36f1103f615ac3e917