matchMedia() on react

[pietdasilva 1 Likes (Newbie)]

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  }  :  ??

        }

      );

    });

  }, []);

 

[Rodrigo 5,085 Likes (Superhero)]

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

[chacrasoftware 2 Likes (Newbie)]

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?

[Cassie 5,137 Likes (Superhero)]

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()