Jump to content
GreenSock

SWALKER

Reset on browser width change

Go to solution Solved by Cassie,

Recommended Posts

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

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.matchMedia

https://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

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

See the Pen ZExgGwz by shereewalker (@shereewalker) on CodePen



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

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

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

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

  • Solution

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?

 

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

Hi Cassie

 

I am so so sorry, I have been away. This worked for me - I can't thank you enough!

  • Like 2
Link to comment
Share on other sites

Hooray! Thanks for popping back

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×