ferriss Posted April 29, 2021 Share Posted April 29, 2021 Hi, Is it possible to use matchMedia (which I assume if the only way to add responsive breakpoints) within gsap? Your docs mentions this is the most common setup, but I cannot see a property that allows using breakpoints using that setup, only by using the standalone version? I'm currently using the common setup like so: gsap.to(container, { x: () => -(container.offsetWidth - document.documentElement.clientWidth) + "px", ease: "none", scrollTrigger: { trigger: container, pin: true, scrub: true, end: () => "+=" + container.offsetWidth } }) This is to do a horizontal scroll lock. On mobile I just want to stack, so the only way I can see to do this is re-code into a standalone setup and then use .matchMedia()? Or is there another nested property. Thanks Link to comment Share on other sites More sharing options...
OSUblake Posted April 29, 2021 Share Posted April 29, 2021 What do you mean "standalone"? You can either use ScrollTrigger's .matchMedia() or write your own media queries. 1 Link to comment Share on other sites More sharing options...
ferriss Posted April 29, 2021 Author Share Posted April 29, 2021 From your docs: Quote Standalone/Custom example You don't need to put ScrollTriggers directly into animations (though that's probably the most common use case). The above example isn't using that setup, so won't allow the use of .matchMedia() without re-coding to a standalone setup? Yes, I'm aware of JS media queries, but I then didn't want to add in resize debouce as I was hoping GSAP had this in-build so you can resize the browser and it'll degrade without refreshing. Link to comment Share on other sites More sharing options...
OSUblake Posted April 29, 2021 Share Posted April 29, 2021 Sorry, I still don't quite understand what you're asking. You can put whatever code you want into the matchMedia functions. Can you please put what you're trying to achieve into a demo? 49 minutes ago, ferriss said: Yes, I'm aware of JS media queries, but I then didn't want to add in resize debouce as I was hoping GSAP had this in-build so you can resize the browser and it'll degrade without refreshing. Media query events don't fire on resize, they fire on media query change events, so trying to debounce them is pointless. 1 Link to comment Share on other sites More sharing options...
ferriss Posted April 29, 2021 Author Share Posted April 29, 2021 Ah, noted on the Media Query events. — Regards to the .matchMedia(), are you saying I can do it like this: ScrollTrigger.matchMedia({ "(min-width: 800px)": () => { gsap.to(container, { x: () => -(container.offsetWidth - document.documentElement.clientWidth) + "px", ease: "none", scrollTrigger: { trigger: container, pin: true, scrub: true, end: () => "+=" + container.offsetWidth } }) } }); As this looks wrong to me, so my question is, do I need to re-code the opening posts setup to use .matchMedia(), without using scrollTrigger: {} within GSAP. or the other question was, is there a property to use within the animation. gsap.to(container, { x: () => -(container.offsetWidth - document.documentElement.clientWidth) + "px", ease: "none", scrollTrigger: { trigger: container, pin: true, scrub: true, end: () => "+=" + container.offsetWidth, matchMedia: { "(min-width: 800px)": () => { // Do Something } } } }) Link to comment Share on other sites More sharing options...
Solution OSUblake Posted April 29, 2021 Solution Share Posted April 29, 2021 10 minutes ago, ferriss said: Regards to the .matchMedia(), are you saying I can do it like this: Yep. Did you look at the examples in the docs? That's pretty much the format they all use. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia() 12 minutes ago, ferriss said: or the other question was, is there a property to use within the animation. No that's not possible, but like I said earlier, you can put any code you want inside the matchMedia functions. 1 Link to comment Share on other sites More sharing options...
ferriss Posted April 29, 2021 Author Share Posted April 29, 2021 Thanks, I should've looked harder, I just assumed the scrollTrigger: {} within GSAP was redundant and you have to put it on the ScrollTrigger. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now