Clean up "old animation" on window resize? (React)

[maxvia]

Hi guys, 

 

How would you proceed if you wished to clean up old animations following a window resize? 

 

I have a global state (redux) within my app that updates after window resizing. I have tried to connect my components that use gsap animations  to this global state width and useEffect().

It seems to be working fine meaning that the animations are restarting when I resize however the old animations are still running so it gets messy.

 

How would you guys handle this?

 

Thank you!

[Rodrigo]

Hi,

 

In the same useEffect() hook that you're using to create the new animations, before doing that, kill all the animations that will be created again. For this I would recommend a factory function that will kill and then re-create all the animations that will be affected by the resize event.

 

With that in mind is always a good idea to store your animations in a ref using the useRef() hook in order to make it simple to access to them and create them again. This also ensures that the animations are not affected by re-renders that are caused by other reasons.

 

Something like this:

const isResized = useSelector(state => state.isResized);
const myTween = useRef(null);

useEffect(() => {
  // Kill tween first
  myTween.current.kill();
  // Create the tween again
  createMyTween();
}, [isResized]);

const createMyTween = () => {
  myTween.current = gsap.to(/* GSAP config here */);
}

Happy Tweening!!!

[maxvia]

This is great @Rodrigo! 

 

Thank you very much for the detailed answer and exemple 🙏