kill hover animation in gsap matchmedia // react

[Sherlok]

Hello,

The example is located here https://codesandbox.io/s/serene-lena-5o2lhi?file=/src/App.js. 

When the width suitable for desktop the hover animation plays well. But I want to turn the animation for mobile devices. So, on mobile devices I got Cannot read properties of undefined (reading 'play'). I try to reset timeline or use kill but it doesn't work for me. What is the best way to do it? 

Thanks

[Rodrigo]

Hi,

 

Just a syntax error:

// Syntax in the breakpoint here
mm.add("max-width: 1023px", () => {
  tlMainLogoRef.current = gsap
    .timeline({ paused: true })
    .to(".mainLogo", { rotate: 0, scale: 0 }, "<");
});

You forgot the parenthesis around the breakpoint:

mm.add("(max-width: 1023px)", () => {
  tlMainLogoRef.current = gsap
    .timeline({ paused: true })
    .to(".mainLogo", { rotate: 0, scale: 0 }, "<");
});

Happy Tweening!

[Sherlok]

Thanks, @Rodrigo