Gsap.matchMedia does not work on mobile devices

[adamatronix]

Hi, 

 

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

[GreenSock]

Looks like you had a typo: 

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

(Missing an ")") 

[adamatronix]

ah my bad. thanks

[Kai-Ziefle]

Had the same typo here, think it's a copy/paste thing as the ")" is also missing on the offical docs page example (section "Simplistic desktop/mobile example"):

https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

[GreenSock]

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