SWALKER Posted August 31, 2022 Share Posted August 31, 2022 Hi there I have been trying to incorporate matchmedia into a for each loop but I can't get it to work nor can I find any examples that are sort of close to my starting point. I tried following the tutorials but they are all for basic timelines In the end, I gave up and just changed my tweens to from instead of to so I could try and control it will CSS When I have a viewport about 1800px, I want my image to only be 1600px max (they will actually be videos and no doing so, means you can't see the controls when it's too big) It works, but it doesn't recalculate even though I have added scroll trigger refresh Any help would be greatly appreciated, and also, any help or a point in the right direction on how to include matchmedia would be amazing as I don't think I can use the from method in some of my other animations. I have used matchmedia before, but never in a foreach loop. Thanks1 See the Pen ZExgGwz by shereewalker (@shereewalker) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted August 31, 2022 Share Posted August 31, 2022 Hi there. You can just pop your loop inside the mm function like so. Also scrollTrigger matchMedia (that you may have used before) has been deprecated in 3.11 in favour of the new global gsap.matchMediahttps://greensock.com/docs/v3/GSAP/gsap.matchMedia() let mm = gsap.matchMedia(); mm.add("(min-width: 800px)", () => { sections.forEach((section) => { gsap.from(section, { scrollTrigger: { trigger: section, start: "top bottom", end: "top 5%", scrub: true }, width: "0", ease: "ease-in-out" }); }); }); These statements confuse me - If you need more help can you possibly clarify them a little? Quote In the end, I gave up and just changed my tweens to from instead of to so I could try and control it will CSS control what with CSS? The width? Quote When I have a viewport about 1800px, I want my image to only be 1600px max (they will actually be videos and no doing so, means you can't see the controls when it's too big) Max widths are usually best handled with max-width in CSS, not with JS Quote It works, but it doesn't recalculate even though I have added scroll trigger refresh what doesn't recalculate? There's no scrollTrigger refresh or matchMedia in your demo. Link to comment Share on other sites More sharing options...
SWALKER Posted August 31, 2022 Author Share Posted August 31, 2022 Hi Cassie Thanks for your reply To answer your questions (sorry for my lack of explanation) I did actually watch that video and try and put it in the loop but I couldn't get it to work. There wasn't an example of a foreach loop so I assumed I was way off with it but it looks like I was maybe just a wee bit off getting it right. All I really wanted to do with this particular animation was change the width. Initially the width was changed in a 'to' statement but when I couldn't get match media to work, I made it a 'from' and changed the width with CSS media queries. It works, but only on page refresh. Sorry, my live site did have the refresh but I forgot to add it to the codepen. It didn't seem to fix it anyway. SO - now that I know how to do implement match media correctly, I would rather do a 'to' statement and use matchmedia (or at least understand how get it working so I can use it on other ones) I have swapped my copepen code to use matchmedia and it sort of works Below 1800px works fine but the query above 1800px, seems to work on scroll up, but on scroll down, it jumps to 100vw again rather than staying at 1600px and I have no idea why. Thanks again for your help Link to comment Share on other sites More sharing options...
Cassie Posted August 31, 2022 Share Posted August 31, 2022 Ok - I think this is what you're going for? See the Pen OJZLMMK?editors=1010 by GreenSock (@GreenSock) on CodePen But just a heads up - You're creating a brand new match media inside a loop here. You only want to create one matchMedia Link to comment Share on other sites More sharing options...
SWALKER Posted August 31, 2022 Author Share Posted August 31, 2022 Hi Cassie Thanks for this - this is correct yes, but I am trying to add the match media query in there as well so the container only expands to 1600px above 1800px width. I'm so sorry but I don't really understand this: 15 minutes ago, Cassie said: You're creating a brand new match media inside a loop here. You only want to create one matchMedia Link to comment Share on other sites More sharing options...
SWALKER Posted August 31, 2022 Author Share Posted August 31, 2022 So it pains me to say this, but I have had to switch back to GSAP 7.0 I have quite a few animations that require match media and I can't get it to work. I found the old version really easy (apart from the loop bit) I will have to come back to it after the project launches (tomorrow!) All I was trying to find out/documentation for was How you implement the new match media for something like this ScrollTrigger.matchMedia({ "(min-width: 901px)": function(){ gsap.to(".text-slide-left", { scrollTrigger: { trigger: ".sliding-header", start: "top bottom", end:"top top", scrub: .6, }, x: '20vw' }); }, "(max-width: 900px)": function(){ gsap.to(".text-slide-left", { scrollTrigger: { trigger: ".sliding-header", start: "top bottom", end:"top 20%", scrub: .6, }, x: '20vw' }); }, }); And how you would you do this for a loop, so how would I do this but for ALL instances: ScrollTrigger.matchMedia({ "(min-width: 1800px)": function(){ gsap.to(".expanding-video .expanding-container", { scrollTrigger: { trigger: ".expanding-video .expanding-container", start: "top bottom", end:"top 20%", scrub: true, }, width: '100vw', ease: "ease-in-out" }); }, "(max-width: 1799px)": function(){ gsap.to(".expanding-video .expanding-container", { scrollTrigger: { trigger: ".expanding-video .expanding-container", start: "top bottom", end:"top 20%", scrub: true, }, width: '1600px', ease: "ease-in-out" }); }, }); I Have tried in the codepen, but it's jumpy and does not worrk on reverse scroll Link to comment Share on other sites More sharing options...
Solution Cassie Posted August 31, 2022 Solution Share Posted August 31, 2022 does this demo make sense to you? See the Pen eYrOEoM?editors=1010 by GreenSock (@GreenSock) on CodePen I think you've misunderstood something along the way - let's try and work out what it is. Quote You're creating a brand new match media inside a loop here. You only want to create one matchMedia // bad sections.forEach((section) => { // you're creating a brand new matchMedia object and assigning it to the mm var every loop let mm = gsap.matchMedia(); mm.add("(min-width: 1800px)", () => { ...tweens }) }) // good // one match media object let mm = gsap.matchMedia(); // loop around the sections sections.forEach((section) => { // add for every section, add some tweens to the matchMedia object mm.add("(min-width: 1800px)", () => { ...tweens }) }) // or, also good // one match media object let mm = gsap.matchMedia(); // add stuff to it mm.add("(min-width: 1800px)", () => { //all tweens inside here will be added even if they're in a loop sections.forEach((section) => { ...tweens } }) Does this help? 1 Link to comment Share on other sites More sharing options...
SWALKER Posted October 7, 2022 Author Share Posted October 7, 2022 Hi Cassie I am so so sorry, I have been away. This worked for me - I can't thank you enough! 2 Link to comment Share on other sites More sharing options...
Cassie Posted October 7, 2022 Share Posted October 7, 2022 Hooray! Thanks for popping back 1 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