skyfy Posted September 14, 2020 Share Posted September 14, 2020 Hello, Is there a solution to have matchmedia () with multiple media queries for scroll trigger, any suggestions would be great. ScrollTrigger.matchMedia({ '(min-width: 768px)': ( ) { } '(min-width: 1024px)': ( ) { } '(min-width: 1200px)': ( ) { } '(min-width: 1600px)': ( ) { } }) Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 14, 2020 Share Posted September 14, 2020 Hey skyfy. The above should work. Does it not work for you? Most likely you want to have a max-width in each as well so you don't create multiple ScrollTriggers for the same elements on larger screen sizes. Link to comment Share on other sites More sharing options...
skyfy Posted September 15, 2020 Author Share Posted September 15, 2020 Hi Zach, I am struggling a bit with multiple trigger, attached code is what I am trying to achieve, any guidance would be great. const Sticky = () => { const sectionOffset = `${sectionRef.current.offsetTop}`; if (!Killed) { // ScrollTrigger.saveStyles(stickyRef.current) // ScrollTrigger.config({ limitCallbacks: true }) ScrollTrigger.matchMedia({ "(max-width: 480x)": () => { ScrollTrigger.create({ trigger: stickyRef.current, pin: true, start: `top-=${sectionOffset} top`, end: `bottom center-=${sectionOffset} `, markers: true, pinSpacing: false, scrub: 0.5, refresh: true, }); }, "(min-width: 768px)": () => { ScrollTrigger.create({ trigger: stickyRef.current, pin: true, start: `top-=${sectionOffset} top`, end: `bottom center-=2%`, markers: true, pinSpacing: false, scrub: 0.5, refresh: true, }); }, "(min-width: 1024px)": () => { ScrollTrigger.create({ trigger: stickyRef.current, pin: true, start: `top-=${sectionOffset} top`, end: `bottom center+=4%`, markers: true, pinSpacing: false, scrub: 0.5, refresh: true, }); }, "(min-width: 1200px)": () => { ScrollTrigger.create({ trigger: stickyRef.current, pin: true, start: `top-=${sectionOffset} top`, end: "bottom center-=30%", markers: true, pinSpacing: false, // pinReparent: true, scrub: 1, // anticipatePin: 1, }); }, }); } }; Link to comment Share on other sites More sharing options...
_Greg _ Posted September 15, 2020 Share Posted September 15, 2020 Hi!, can you provide minimal demo on codepan? Ypu place code but its not readable I reformat your code via Prettier, but what result do you have? Better create codepen minimal demo const Sticky = () => { const sectionOffset = `${sectionRef.current.offsetTop}`; if (!Killed) { // ScrollTrigger.saveStyles(stickyRef.current) // ScrollTrigger.config({ limitCallbacks: true }) ScrollTrigger.matchMedia({ "(max-width: 480x)": () => { ScrollTrigger.create({ trigger: stickyRef.current, pin: true, start: `top-=${sectionOffset} top`, end: `bottom center-=${sectionOffset} `, markers: true, pinSpacing: false, scrub: 0.5, refresh: true, }); }, "(min-width: 768px)": () => { ScrollTrigger.create({ trigger: stickyRef.current, pin: true, start: `top-=${sectionOffset} top`, end: `bottom center-=2%`, markers: true, pinSpacing: false, scrub: 0.5, refresh: true, }); }, "(min-width: 1024px)": () => { ScrollTrigger.create({ trigger: stickyRef.current, pin: true, start: `top-=${sectionOffset} top`, end: `bottom center+=4%`, markers: true, pinSpacing: false, scrub: 0.5, refresh: true, }); }, "(min-width: 1200px)": () => { ScrollTrigger.create({ trigger: stickyRef.current, pin: true, start: `top-=${sectionOffset} top`, end: "bottom center-=30%", markers: true, pinSpacing: false, // pinReparent: true, scrub: 1, // anticipatePin: 1, }); }, }); } }; 1 Link to comment Share on other sites More sharing options...
skyfy Posted September 15, 2020 Author Share Posted September 15, 2020 My apologies, i missed out wrongly formatted code, below are the two projects https://codesandbox.io/s/scroll-lock-pinned-ogwed?file=/src/pages/index.js https://codesandbox.io/s/confident-satoshi-1id2b most of the references what i found were for single min and max matchmedia examples. regards Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 15, 2020 Share Posted September 15, 2020 As I said, you likely want to have a min and max width on your media queries: "(min-width: 768px)" // not what you want "(min-width: 768px) and (max-width: 1023px)"// what you want Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 15, 2020 Share Posted September 15, 2020 Also I'm not sure what you're trying to do with the refresh: true... There's no property called refresh on ScrollTriggers. Link to comment Share on other sites More sharing options...
pravSab Posted March 29, 2023 Share Posted March 29, 2023 On 9/15/2020 at 6:58 PM, ZachSaucier said: "(min-width: 768px) and (max-width: 1023px)" What if We want to do for landscape or portrait mode in the above , will it work if I add like below @Zach Quote "(min-width: 768px) and (max-width: 1023px) and (orientation: landscape)" Link to comment Share on other sites More sharing options...
Rodrigo Posted March 29, 2023 Share Posted March 29, 2023 Hi @pravSab, I just tested this code on an iPad (Safari, Chrome and Firefox) and it seems to work: const mm = gsap.matchMedia(); mm.add( "(min-width: 768px) and (max-width: 1023px) and (orientation: portrait)", () => { alert("Foo Bar " + Date.now()); } ); I'm using portrait in this case, since the breakpoints you indicate are the ones in portrait orientation. For landscape I believe it has to be over 1024px. Hopefully this helps. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
pravSab Posted March 29, 2023 Share Posted March 29, 2023 Thanks @Rodrigo 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