Jump to content


matchMedia() on react

Recommended Posts

hi friends, so i had an animation that was working great on desktop, but when i check it on mobile it doesn't. since it is on a method and it's a scrollTrigger animation i'm having trouble to write it, can someone help me? thanks!


function Hero() {
  const imgRef = useRef();
  useEffect(() => {
    const q = gsap.utils.selector(imgRef);
    let mm = gsap.matchMedia();
      isMobile: "(max-width: 500px)",
      isDesktop: "(min-width: 501px)",
    }, (context) => {
      let {isMobile, isDesktop} = context.conditions;
    q(".textBtn").forEach((txt) => {
          scrollTrigger: isDesktop ? { trigger: txt, scrub: 0.8, start: 'top 40%', end: "+=400", pin: true, pinSpacing: false  }  :  ??
  }, []);
Link to comment
Share on other sites



Is really difficult to debug with just the code you posted. Please provide a minimal demo that clearly demonstrates the issue you're having, using either codesandbox or stackblitz.


A ternary scroll trigger configuration seems to be working in this example:

See the Pen XWqeprR by GreenSock (@GreenSock) on CodePen


Happy Tweening!!!

Link to comment
Share on other sites

  • 3 months later...

with the new gsap.context how can we use alongside match media? do we need to kill the match media or the context.revert() will do the job?

Link to comment
Share on other sites

Heya! Good question - You don't need to use context and matchmedia together. 

MatchMedia actually uses context under the hood to collect up all the animations - so you can just use matchMedia and then call revert on your matchMedia instance instead.



let mm = gsap.matchMedia();



  • Like 2
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.