matchMedia not replaying the animation after window resize

[Tudor230]

I have 3 items that are displayed horizontally when the screen width is above 769px and vertically when under. They are supposed to move right when displayed vertically and up when displayed horizontally

The problem that  I am facing is that  if i scroll until the boxes are out of view/animation is finished while the device width is under 769px and then size up the window and size it back down under the breakpoint the animation is stuck. Also the other way around doesn't work either

I have built a similar minimal demo and i have the same issue:
https://stackblitz.com/edit/react-1c228f?file=src%2FApp.js
 

[GSAP Helper]

Hi there! I see you're using React -

Proper animation cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.

In GSAP 3.11, we introduced a new gsap.context() feature that helps make animation cleanup a breeze. All you need to do is wrap your code in a context call. All GSAP animations and ScrollTriggers created within the function get collected up in that context so that you can easily revert() ALL of them at once.

Here's the structure:

// typically it's best to useLayoutEffect() instead of useEffect() to have React render the initial state properly from the very start.
useLayoutEffect(() => {
  let ctx = gsap.context(() => {
    // all your GSAP animation code here
  });
  return () => ctx.revert(); // <- cleanup!
}, []);

This pattern follows React's best practices, and one of the React team members chimed in here if you'd like more background.

We strongly recommend reading the React information we've put together at https://gsap.com/resources/React/

Happy tweening!

[Tudor230]

Doesnt matchMedia create a context already?

[Tudor230]

25 minutes ago, GSAP Helper said:

Hi there! I see you're using React -

Proper animation cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.

In GSAP 3.11, we introduced a new gsap.context() feature that helps make animation cleanup a breeze. All you need to do is wrap your code in a context call. All GSAP animations and ScrollTriggers created within the function get collected up in that context so that you can easily revert() ALL of them at once.

I tried using matchMedia.revert() and i got Maximum call stack size exceeded

[GreenSock]

58 minutes ago, Tudor230 said:

I tried using matchMedia.revert() and i got Maximum call stack size exceeded

I bet you accidentally called .revert() from INSIDE the MatchMedia's own cleanup function instead of the useLayoutEffect's cleanup function

 

There was a regression in ScrollTrigger 3.12.3 that could cause matchMedia animations to get stuck after resize. Sorry! We'll be releasing a patch soon, but in the meantime you can just revert to 3.12.2

[Tudor230]

Yea , I did  Reverting to 3.12.2 fixed my issue, thanks a lot!