Jump to content


Gsap.matchMedia does not work on mobile devices

Go to solution Solved by GreenSock,

Recommended Posts



Just trying out the new matchMedia functionality in 3.11.0 and while it works ok on a desktop browser, it fails to fire the mobile breakpoint on a mobile device. I am using safari and chrome 104.0.5112.99 on iOS.


The codepen should display either "mobile" or " desktop". Of course it'll work if viewing this post on a desktop browser.


On the documentation page it recommends the following for mobile. However this fails to do anything. The codepen has the correct viewport metatag.

<meta name="viewport" content="width=device-width, initial-scale=1">


See the Pen gOzrbZG by adamatronix (@adamatronix) on CodePen

Link to comment
Share on other sites

  • Solution

Looks like you had a typo: 

// BAD
mm.add("(max-width: 1079px", () => {...});
mm.add("(max-width: 1079px)", () => {...});

(Missing an ")") 

  • Like 1
Link to comment
Share on other sites

You're absolutely right! Sorry about that - it should be fixed now. Thanks for pointing it out @Kai-Ziefle

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.