Jump to content

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

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

Go to solution Solved by Rodrigo,

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 comment
Share on other sites

  • Solution



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
  // Create the tween again
}, [isResized]);

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

Happy Tweening!!!

  • Like 5
Link to comment
Share on other sites

This is great @Rodrigo


Thank you very much for the detailed answer and exemple 🙏



  • Like 1
Link to comment
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.