[scrollTrigger doesnt work with gsap.matchMedia() using Next.js]

Works like a charm @Rodrigo thanks again much appreciated

[scrollTrigger doesnt work with gsap.matchMedia() using Next.js]

Thanks for replaying @Rodrigo I will give this a whirl now and I will let you know how I get on. 

[scrollTrigger doesnt work with gsap.matchMedia() using Next.js]

Hello, so im trying to use the matchmedia feature with ScrollTrigger in Next.js , the code runs perfectly when it's NOT inside the gsap matchmedia callback and starts it behaves strangely when it is. Below is a simple demostration referencing the main container and the target element to animate. Suggestions on why it's not working properly would greatly be appreciated. 

 

 if (typeof window !== "undefined") {
    gsap.registerPlugin(ScrollTrigger);
  }   

useEffect(() => {

let mm = gsap.matchMedia();

      mm.add("(min-width: 1080px)", () => { 
          const tl = gsap.timeline({ paused: false });
        
          const st = ScrollTrigger.create({
          trigger: containerRef.current,
          start: 'top top',
          end: `+=${containerRef.current.offsetHeight}`,
          pin: true,
          animation: tl,
          scrub: true,
          pinSpacing: true,
        });
        
        tl.to(textContainerRef.current, {y: -600,x: 0, duration:2 });
        
        return () => { 
           st.kill();
           tl.kill();
         };
      });
  }, []);

Thanks