I'm trying to setup a sidescroll, which works fine for one screen-size. However, on smaller screens the number of elements that are shown next to each other is changing, and so should the setup. Once the screen gets too small, I want to no longer offer this sidescroll feature and rather have the user navigate using arrows.
I just can't get multiple media-queries if they don't cover the entire pixel range.
For example:
With this setup I get the two different ScrollTrigger settings I need. However it goes down to the small screen:
"(min-width: 1351px)": ...
"(max-width: 1350px)": ...
With this setup, both ScrollTrigger settings no longer work as expected. However below 631px there's no more Scrolltrigger magic (which is what I want):
"(min-width: 1351px)": ...
"(min-width: 631px)": ...
What am I missing here? What sort of definition does ScrollTrigger expect for the range I don't want it to do anything?
Also, would it make a difference if I use rem in the media-queries instead of px?
ScrollTrigger.matchMedia({
//"(min-width: 84.4375rem)": function() {
"(min-width: 1351px)": function() {
gsap.to(sections, {
xPercent: -100 * (sections.length - 3),
ease: "none",
scrollTrigger: {
trigger: "#product-container",
pin: true,
scrub: 2,
snap: 1 / (sections.length - 3),
end: () => "+=" + document.querySelector("#product-container").offsetWidth
}
});
},
//"(min-width: 39.4375rem)": function() {
"(min-width: 631px)": function() {
gsap.to(sections, {
xPercent: -100 * (sections.length - 4),
ease: "none",
scrollTrigger: {
trigger: "#product-container",
pin: true,
scrub: 1,
snap: 1 / (sections.length - 4),
end: () => "+=" + document.querySelector("#product-container").offsetWidth
}
});
},
})