MotionPath circular animation jump after resize-rerender

[Yunus Emre]

codesandbox link: https://codesandbox.io/p/devbox/swing-6ljdq5?file=%2Fapp%2Fswing.tsx%3A178%2C24
full page view: https://6ljdq5-3001.csb.app/

(React.js, Next.js)
Hello!. I have this code dynamically generates random sized/positioned images on the screen, ensuring they don't overlap.
The swing animation is achieved using GSAP's MotionPath plugin. Swing motion is based on image width (vw).
When the window is resized, the component re-renders, so that the positions and sizes of the images are recalculated and stay responsive.
* But then it starts to jump in the swing motion in the images. What could be the problem?

Secondly, do you think I am using gsap correctly for swing and mouse-move animations. What to improve, any tips?

[Rodrigo]

Hi,

 

Your demo is not accessible:
 

Devbox not found

It's likely that the Devbox you're trying to access doesn't exist or you don't have the required permissions to access it.

 

Please be sure to make it public or better create it on Stackblitz.

 

Happy Tweening!

[Yunus Emre]

Thanks, updated permissions.

[Rodrigo]

Hi,

 

It seems that using revertOnUpdate: true does the trick:

useGSAP(() => {
  // ...
}, {
  scope: holder,
  dependencies: [windowWidth],
  revertOnUpdate: true // <- HERE
});

It seems that the problem stems from the fact that the previous instances of the cycling animations are not getting killed before creating a new one and the inline styles are throwing off the data for the new ones.

 

https://gsap.com/resources/React#config-object

 

Also as a friendly advice I'd debounce the resize handler and perhaps fade out/in the images because even without the jump the UI (which is great by the way! 🤩) looks odd with the images suddenly jumping when the new position is created.

 

Hopefully this helps.

Happy Tweening!

[Yunus Emre]

Thanks a lot for your help and valuable advice @Rodrigo 🙏