How to add matchmedia in useGsap

[RADNM]

 useGSAP(() => {
    const el = valueRef.current;
    const item1 = item1Ref.current;
    const item2 = item2Ref.current;
    const item3 = item3Ref.current;
    const mm=gsap.matchMedia();
 

    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: el,
        start: "top 18%",
        end: "+=1500px",
        pin: true,
        markers: true,
        pinSpacing: true,
        onEnter: () => {
          console.log("Enter");
        },
      },
    });

  
      ScrollTrigger.create({
      trigger: item1,
      start: "+=100px",
      end: "+=20px",
      scrub: 1,
      onToggle: self => {
        if (self.isActive) {
          setActiveIndex(0);
        }
      },
    });
  
    ScrollTrigger.create({
      trigger: item2,
      start: "+=100px",
      end: "+=200px",
      scrub: 1,
      onToggle: self => {
        if (self.isActive) {
          setActiveIndex(1);
        }
      },
    });
    

    ScrollTrigger.create({
      trigger: item3,
      start: "+=300px",
      end: "+=150px",
      scrub: 1,
      onToggle: self => {
        if (self.isActive) {
          setActiveIndex(2);
        }
      },
    });
 
       
      return () => {
        tl.set("body", { overflow: "auto" });
        tl.kill();
      };
   
 
  }, {scope: valueRef});

Hey Guys can anyone tell me how to add match media where this should only work in screens larger than 768px I tried by inserting the code inside match media but didn't work and this is a react project.  Thank you in advance

[Rodrigo]

Hi,

 

When using useGSAP there is no need for manual cleanup, the hook does that for you, so you don't need to kill your timeline in the return statement. Setting the body element's style is OK though:

https://gsap.com/resources/React

 

Here is a simple demo showing how to implement GSAP MatchMedia in the useGSAP hook, as always just put your GSAP instances (including the MatchMedia one) inside the scope of the hook and everything should work:

https://stackblitz.com/edit/vitejs-vite-pfhzkf?file=src%2FApp.jsx

 

Hopefully this helps.

Happy Tweening!

[RADNM]

Thank you I got the solution