matchMedia() not working as expected

[M. Adnan Ghori]

It's working fine in desktop size, but when I add max-width 375px

It's disappear when I reach portfolio-slider which is pin.

See the Pen OJdPmvr by _adnan06 (@_adnan06) on CodePen

[mvaneijgen]

I would strongly encourage the use of markers: true, this way you can see what ScrollTrigger is doing and thus see if that is inline with your assumptions. 

 

Having end: "bottom center" on small screens will probably mean that the ScrollTrigger is already at the end when it has not even started, so nothing will happen of at least your animation will jump to the end. 

 

Also you're media queries overlap, max with 320px is inside 1920px, usually you do something like this, where when one media query ends the other takes over.

mm.add("(min-width: 800px)", () => {
  // desktop setup code here...
});

mm.add("(max-width: 799px)", () => {
  // mobile setup code here...
});

// or write it all the way out 
"(min-width: 371px) and (max-width: 1920px)"

 

Keep in mind that ScrollTrigger.matchMedia() has ben depricated (https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()), it is now build in to GSAP https://gsap.com/docs/v3/GSAP/gsap.matchMedia()

 

Hope it helps and happy tweening! 

 

See the Pen zYeWzxW?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[M. Adnan Ghori]

Thank you so much it's working fine now.