Different Scrolltrigger triggers with matchMedia?

[dfreerider]

Hi,

 

I have an animation where I want a different scrollTrigger trigger to drive the animation based on if it is on mobile or desktop. I've tried to use matchMedia to do this but it's not working.

 

I was thinking I could do something like the following, and check for mobile when setting the trigger:

 

let mm = gsap.matchMedia();
mm.add ({
  isMobile: "(max-width:800px)",
  isDesktop: "(min-width:801px)",

}, (context) => {
   let {isMobile, isDesktop } = context.conditions;
  
   let tl = gsap.timeline({
        scrollTrigger :{
            trigger:isMobile ? mobile_class_name : class_name,
            
  

 

First of all, I'm wondering if it is possible to use matchMedias to achieve this? It's always possible I have another bug in my code that prevents this from working

 

If it is not possible to use matchMedia to do this, I was wondering how I can best achieve this in another way?

 

Thank you!

 

Best

 

Espen

 

[Cassie]

Heya! Thanks for supporting us by being part of Club GreenSock. 💚

 

Yep, the code you linked is valid, maybe it's the fact that your classnames are var instead of strings? 

 

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

 

[dfreerider]

Thank you Cassie!

 

You're right. I had some issues with the class selectors that prevented it from working.

 

-Espen