Responsive ScrollTriggers ordering (ScrollTrigger.matchMedia?)

[Marco Rodrigues]

Hello everyone,

Based on the pen above, how would I disable, for mobile (767px), all the animations but keep only the createColor one?

What I want for a website I'm making, is disable specific animations/scrollTriggers (mostly the text reveal ones) for mobile, but keep some others for every media query.

 

Since I'm using functions for each animation and creating them in a for each loop for them to be created in order and not bug, I'm kinda lost how would I achieve responsiveness here. Using ScrollTrigger.matchMedia inside each function might work, but I feel like it's the wrong approach to do it. I have also tried using only 1 ScrollTrigger.matchMedia before the loop, but that would make the scrolltriggers to be created out of order and bug.

See the Pen ExbqrWr by marcorodriguesdev (@marcorodriguesdev) on CodePen

[OSUblake]

Hi Marco, 

 

If I understand you correctly, you just need 1 matchMedia. Just call your functions from within that.

 

ScrollTrigger.matchMedia({
  "(min-width: 600px)": function() {
    createColorAnimation();
    createAnotherAnimation();
    
  },
  "(max-width: 599px)": function() {
    createColorAnimation();
  }	
}); 

 

[Marco Rodrigues]

12 hours ago, OSUblake said:

Hi Marco, 

 

If I understand you correctly, you just need 1 matchMedia. Just call your functions from within that.

 

ScrollTrigger.matchMedia({
  "(min-width: 600px)": function() {
    createColorAnimation();
    createAnotherAnimation();
    
  },
  "(max-width: 599px)": function() {
    createColorAnimation();
  }	
}); 

 

Wouldn't that make the scrolltriggers to be created out of order since there will be multiple mixed on the page? That's why I  was looking to loop through each ".scroll-trigger" element, because that's the class that is common on every single one of them, check if the element contains the class that identifies the scrolltrigger and then call it.

Kinda what I'm doing here: 

gsap.utils.toArray(".scroll-trigger").forEach(element => {
  if (element.classList.contains("colors-section")) {
    createColor(element);
  } 
  if (element.classList.contains("text-fade-in-out")) {
    createFadeInOut(element);
  }
  if (element.classList.contains("text-animate")) {
    createTextAnimate(element);
  }
})


I don't think I'm supposed to use matchMedia inside the loop, and if I use it outside the loop that will make the scrolltriggers to be created out of order and bug.

 

Sorry if I'm missing something obvious or understanding incorrectly.

[OSUblake]

That was pseudo code because I don't know what you wanted for each media query. The point is to do the creation inside the matchMedia. 

 

ScrollTrigger.matchMedia({
  "(min-width: 600px)": function() {
    gsap.utils.toArray(".scroll-trigger").forEach(element => {
      if (element.classList.contains("colors-section")) {
        createColor(element);
      } 
      if (element.classList.contains("text-fade-in-out")) {
        createFadeInOut(element);
      }
      if (element.classList.contains("text-animate")) {
        createTextAnimate(element);
      }
    })
    
  },
  "(max-width: 599px)": function() {
    ...
  }	
});

 

[Marco Rodrigues]

4 hours ago, OSUblake said:

That was pseudo code because I don't know what you wanted for each media query. The point is to do the creation inside the matchMedia. 

 

ScrollTrigger.matchMedia({
  "(min-width: 600px)": function() {
    gsap.utils.toArray(".scroll-trigger").forEach(element => {
      if (element.classList.contains("colors-section")) {
        createColor(element);
      } 
      if (element.classList.contains("text-fade-in-out")) {
        createFadeInOut(element);
      }
      if (element.classList.contains("text-animate")) {
        createTextAnimate(element);
      }
    })
    
  },
  "(max-width: 599px)": function() {
    ...
  }	
});

 

That's what I have tried before and without success.
An approach like this makes the scrolltriggers out of order and bug:
ScrollTrigger.matchMedia({
  "(min-width: 600px)": function() {
    gsap.utils.toArray(".scroll-trigger").forEach(element => {
      if (element.classList.contains("text-fade-in-out")) {
        createFadeInOut(element);
      }
      if (element.classList.contains("text-animate")) {
        createTextAnimate(element);
      }
    })
  },
  "all": function() {
    createColor(".colors-section");
  }
})
Even if inside the "all" function I loop again through each ".scroll-trigger" it still doesn't work.
Updated the pen with the code above.

[OSUblake]

Just do it like you did with the other stuff.

 

ScrollTrigger.matchMedia({
  "(min-width: 600px)": function() {
    gsap.utils.toArray(".scroll-trigger").forEach(element => {
      if (element.classList.contains("colors-section")) {
        createColor(element);
      } 
      if (element.classList.contains("text-fade-in-out")) {
        createFadeInOut(element);
      }
      if (element.classList.contains("text-animate")) {
        createTextAnimate(element);
      }
    })
    
  },
  "(max-width: 599px)": function() {
    gsap.utils.toArray(".scroll-trigger").forEach(element => {
      if (element.classList.contains("colors-section")) {
        createColor(element);
      } 
    })
  }	
});

 

And you may need to use saveStyles.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.saveStyles()

 

[Marco Rodrigues]

13 minutes ago, OSUblake said:

Just do it like you did with the other stuff.

 

ScrollTrigger.matchMedia({
  "(min-width: 600px)": function() {
    gsap.utils.toArray(".scroll-trigger").forEach(element => {
      if (element.classList.contains("colors-section")) {
        createColor(element);
      } 
      if (element.classList.contains("text-fade-in-out")) {
        createFadeInOut(element);
      }
      if (element.classList.contains("text-animate")) {
        createTextAnimate(element);
      }
    })
    
  },
  "(max-width: 599px)": function() {
    gsap.utils.toArray(".scroll-trigger").forEach(element => {
      if (element.classList.contains("colors-section")) {
        createColor(element);
      } 
    })
  }	
});

 

And you may need to use saveStyles.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.saveStyles()

 

It works now. I think my problem was that I was setting the function that had to be run the same on every media query inside an "all" matchMedia.

Once I added a min-width: 768px breakingpoint inside the matchMedia to execute the function, and a max-width:767 which also executes the same function, it worked.

 

Thanks for your time and patience.