'Maximum call stack size exceeded' when using responsive display I get RangeError: Maximum call stack size exceeded' error

[Semih]

 

Hello, when I use this gsap feature and minimize the screen, I encounter this error. I want to use this feature on mobile in my own project. But I don't know how to solve this error

 

Maximum call stack size exceeded RangeError: Maximum call stack size exceeded

 

https://stackblitz.com/edit/react-clkzur?file=src%2FApp.js,src%2Fstyle.css

[Rodrigo]

Hi,

 

I'm not seeing that error in your demo and I created a new React app in my local machine with your exact same code and also can't see the error.

 

There must be something else in your config that is causing this and I just can't see it 🤷‍♂️

 

Happy Tweeing!

[Semih]

2 hours ago, Rodrigo said:

Hi,

 

I'm not seeing that error in your demo and I created a new React app in my local machine with your exact same code and also can't see the error.

 

There must be something else in your config that is causing this and I just can't see it 🤷‍♂️

 

Happy Tweeing!

Sorry, I posted the wrong gsap code. I changed the code. I encounter this problem when I add the responsive feature to the Gsap code. First set it to 1100px and then reduce the screen size. you can see the error...

 

https://stackblitz.com/edit/react-clkzur?file=src%2FApp.js,src%2Fstyle.css

[GreenSock]

I noticed two problems: 

1. You're returning a revert function from the matchMedia() entry that's reverting the instance itself. So you're creating an infinite loop. When a matchMedia() doesn't match anymore, it'll revert that instance and part of that process involves calling any revert functions that were returned inside the matchMedia() functions. So it starts reverting the instance, calls your returned function which in return calls revert() on the entire instance again which goes through that process, over and over. You put your mm.revert() in the wrong spot - it belongs OUTSIDE that matchMedia() function. 
2. You forgot to define an empty dependency Array on your useLayoutEffect(). 

useLayoutEffect(() => {
    let mm = gsap.matchMedia();
    gsap.registerPlugin(ScrollTrigger);
    mm.add('(min-width: 1100px)', () => {
      const textElements = gsap.utils.toArray('.deneme');

      textElements.forEach((text) => {
        gsap.to(text, {
          backgroundSize: '60%',
          ease: 'none',
          scrollTrigger: {
            trigger: text,
            start: 'top 50%',
            end: 'bottom',
            // markers:true,
            scrub: true,
          },
        });
      });
    });
    return () => mm.revert(); // <-- this goes outside the matchMedia.add() function
  }, []); // <-- important!

I hope that helps.