Jump to content
Search Community

matchMedia() on react

pietdasilva test
Moderator Tag

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();
 
    mm.add({
      isMobile: "(max-width: 500px)",
      isDesktop: "(min-width: 501px)",
    }, (context) => {
      let {isMobile, isDesktop} = context.conditions;
   
 
    q(".textBtn").forEach((txt) => {
      gsap.to(
        txt,
        {
          scrollTrigger: isDesktop ? { trigger: txt, scrub: 0.8, start: 'top 40%', end: "+=400", pin: true, pinSpacing: false  }  :  ??
        }
      );
    });
  }, []);
 
Link to comment
Share on other sites

Hi,

 

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

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.

 

e.g.
 

let mm = gsap.matchMedia();

mm.revert()

 

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