matchMedia not working?

[ValenG]

Hi! its my first time using this feature so maybe im using something wrong.

I want a different animation for 522px and lower but it keeps using the +522px animation (x: -200em), here is my code:

useGSAP(
      () => {
         gsap.from("#filmmaking_video", {
            scrollTrigger: {
               trigger: "#filmmaking",
               start: "top bottom",
               end: "bottom top",
               scrub: 1.5,
            },
            rotate: 70,
            y: "30em",
            x: "-200em",
         });

         let mm = gsap.matchMedia();
         mm.add("(max-width: 522px)", () => {
            gsap.from("#filmmaking_video", {
               scrollTrigger: {
                  trigger: "#filmmaking",
                  start: "top bottom",
                  end: "bottom top",
               },
               y: "-10em",
               x: "10em",
            });
         });
      },
      { scope: pojects_grid }
   );

I've also added this line:

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

[Rodrigo]

Hi,

 

You shouldn't have different GSAP instances inside the MatchMedia instance and another outside, both should be inside the MatchMedia instance. MatchMedia basically checks the screen width and the breakpoints you pass and reverts the instances based on that.

 

Check this demo in order to see how MatchMedia inside useGSAP works:

https://stackblitz.com/edit/vitejs-vite-pfhzkf?file=src%2FApp.jsx

 

Hopefully this helps

Happy Tweening!