GSAP new matchMedia() not working on mobile

[Samuele]

Hi there! 
I'm having some issue moving to the new GSAP matchMedia feature.

I followed the documentation, but probably i missed out some crucial part as in mobile devices, scrollTrigger animations seem not working to all my projects so far.

I already added to the head section the initial scale:

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

I do have a lot of code going on, but I'll just copy a part of bug:

document.addEventListener("DOMContentLoaded", () => {
    gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
    let mm = gsap.matchMedia();
  
    mm.add("(min-width: 1024px)", () => {
    gsap.to(".sticky-infos", {
      scrollTrigger: {
        trigger: ".sticky-infos",
        start: "top top-=0",
        endTrigger: ".carta-wrapper",
        end: "100% 50%",
        pin: true,
        pinSpacing: false,
      },
    });
   });
  
    mm.add("(max-width: 1023px", () => {
    gsap.to(".sticky-infos", {
      opacity: 1,
      duration: 0.25,
      scrollTrigger: {
        trigger: ".sticky-infos",
        start: "top top-=0",
        endTrigger: ".carta-wrapper",
        end: "100% 20%",
        pin: true,
        pinSpacing: false,
        toggleActions: "play play play reverse",
      },
    });
   });
});

I'm using these versions:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/ScrollToPlugin.min.js"></script>

Anyone have some issue too?

See the Pen ExEzdYx by sml-k (@sml-k) on CodePen

[Cassie]

It's very hard for us to debug without a minimal demo I'm afraid

Here's a starting point for you - can you recreate the issue?

See the Pen KKoMpMv by GreenSock (@GreenSock) on CodePen

[Samuele]

Hi @Cassie!

Here's a minimal demo:

In that case only the 1023px media query doesn't work...

[Cassie]

Gotcha! Typo

 

//typo missing )
mm.add("(max-width: 1023px", () => {
  
//fixed
mm.add("(max-width: 1023px)", () => {

 

Thanks for the demo

[Samuele]

Oh, I feel very blind right now...
Thanks Cassie really appreciate!