Search the Community
Showing results for tags 'mediaquery'.
Found 2 results
-
I'm trying to trigger different timelines at different breakpoints using the window.matchmedia(); method. I've attempted to put together a potential example here: 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); My idea is to have the change button trigger the animations. Is it a little more complex that this approach? Having dug around in the forums it seems media queries plus gsap tends to throw up a number of complex solutions, I was hoping for something a little more simpler. Here's a Codepen also: -
Hey guys working on some responsive animation, not sure how to reset the stored values on media query change. Sure you know what I mean, if not just click the green box then decrease browser width. Thanks!
