Jump to content
Search Community

More than two queries in matchMedia()

skyfy test
Moderator Tag

Recommended Posts

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

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

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,
        });
      },
    });
  }
};

 

  • Like 1
Link to comment
Share on other sites

  • 2 years later...
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

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!

  • Thanks 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.
×
×
  • Create New...