React: Any way to recalculate everything on resize?

[NickWoodward]

So I've made a couple of complex (to me) animations on a site that work great and are responsive-ish. The work at every breakpoint, but break when resizing between them.

I know it may well be React causing the problems (for example storing animations in refs that persist), but as a bandaid (because I don't have a week to play about and fix it properly) is there a way to take all gsap instances and force some sort of recalculation on resize regardless of where they exist?

Sorry if this isn't how it works, just thinking out loud!

[Rodrigo]

Hey Nick!

 

I assume that you're using our useGSAP hook, right?

 

You could create a GSAP MatchMedia instance inside and use breakpoints for that. If the problem is not related to passing specific breakpoints but any resize of any amount of pixels, you can create a window resize handler inside our hook and use the return callback to clean it up:

useGSAP((context) => {
  const init = () => {
    context.add(() => {
      // Create your GSAP instances here that critically depend on the resize event
    });
  };
  
  init();
  
  // You can create other GSAP instances out here that doesn't have issues on
  // the resize event
  
  window.addEventListener("resize", init);
  
  return () => window.removeEventListener("resize", init);
});

The reason for using the context instance inside is because on the first run of the hook the instances will be added to the GSAP Context instance used internally, but on subsequent resizes they won't so you need to add them manually.

 

Hopefully this helps

Happy Tweening!

[NickWoodward]

33 minutes ago, Rodrigo said:

Hey Nick!

 

I assume that you're using our useGSAP hook, right?

 

You could create a GSAP MatchMedia instance inside and use breakpoints for that. If the problem is not related to passing specific breakpoints but any resize of any amount of pixels, you can create a window resize handler inside our hook and use the return callback to clean it up:

useGSAP((context) => {
  const init = () => {
    context.add(() => {
      // Create your GSAP instances here that critically depend on the resize event
    });
  };
  
  init();
  
  // You can create other GSAP instances out here that doesn't have issues on
  // the resize event
  
  window.addEventListener("resize", init);
  
  return () => window.removeEventListener("resize", init);
});

The reason for using the context instance inside is because on the first run of the hook the instances will be added to the GSAP Context instance used internally, but on subsequent resizes they won't so you need to add them manually.

 

Hopefully this helps

Happy Tweening!

Hey Rodrigo - so yeah i'm using useGSAP, and matchMedia. But now that you mention it - it does seem to be any amount of resize, not just across breakpoints, so thanks, that helps a lot.

I had hoped that putting the windowHeight or windowWidth (from a custom hook) as a useGSAP dependency might work in a similar fashion to your suggestion, but it seems to break everything. I'll give your suggestion a try, thanks, but I think I might have to dig a little deeper over a longer period of time!

Thanks for the help

[Rodrigo]

Hey Nick!

 

If you're using window dimensions as dependencies in useGSAP, perhaps try the revertOnUpdate config option:

https://gsap.com/resources/React#revertOnUpdate 

 

Hopefully this helps

Happy Tweening!

[NickWoodward]

oooh, interesting. thanks