Is there a way to leverage ScrollTrigger's matchMedia functionality without wrapping timelines in the function?

[Ginger Soul]

Hey folks, 

 

Long time since my last post, but I've been working with GSAP again and I'm loving the Scrolltrigger. 

 

I'm curious if there is any way to get matchMedia functionality inside a timeline, or if there are other ways to reference it besides wrapping all your timelines with the matchMedia function. 

 

Can you 'ask' the matchmedia function whether it matches, on a timeline-by-timeline basis? 

 

I'm imagining something like this (pardon me if this looks ridiculous, I'm working on populating a timelines object from data-attributes using a loop, and wrapping all the 'eaches' in the 'kosher' matchMedia way is proving difficult).  

 

 

    tl = gsap.timeline({
          scrollTrigger: {
            matchMedia: '(min-width:800px)',
            trigger: '.element',
            start: 'top bottom',
            end: 'bottom top',
            scrub: true
          }
     }); // end timeline

Thanks, DB

[Ginger Soul]

Gonna guess this is a no. 

I'll try to re-jigger the architecture on my end to place the timelines inside the proper .matchMedia functions. 

 

DB

[ZachSaucier]

Hey Ginger. No, you can't pass in a media query to a ScrollTrigger like that. If you need something like that you should wrap it in a ScrollTrigger.matchMedia() function.

 

However, depending on what you're trying to do you might be able to do it with a regular matchMedia check. Perhaps if you shared a minimal demo of your situation we can better guide you as to what's best.

[Ginger Soul]

Thanks, Zach. I'll put something together for you. Sorry for leaving that out, this was so...speculative that it seemed like I should ask first. 

 

DB