Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
maxvia

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

Recommended Posts

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!

Link to post
Share on other sites

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!!!

  • Like 5
Link to post
Share on other sites

This is great @Rodrigo

 

Thank you very much for the detailed answer and exemple 🙏

 

 

  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×