Alexander Paschoaletto

Hey everyone! Hope you are all feeling awesome. I work with GSAP for a while now, having used it within a few React apps for giving life to simple, yet effective animations all around. For my latest project I started building the animations with refs and such, but it wasn't long until I realized implementing the functions directly on components, i.e something like this: gsap.to(what.current, { duration: 2, opacity: 0, }) would be pretty inefficient considering an app with multiple screens which would feature very similar animations all around, with minimal nuances here and there. I then figured a better approach would be simply encapsulate the gsap part on a separate animations.ts file with functions like export const fadeOut = ( what: gsap.TweenTarget, duration?: number, delay?: number, ) => { gsap.to(what, { opacity: 0, duration: duration ?? 0, delay: delay ?? 0, }); }; and indeed this allowed me to reuse similar animation patterns throughout the many screens pretty easily, also making the component code cleaner with the function call instead gsap.to(..., {...}). Everything works a treat, but I'm pretty sure there is some best practice part lacking in terms of memory management, since now the code is no longer inside a useEffect or such to be reverted upon the unmount stage. I wonder, then, if there is a better way to externalize the animation part than this. I have just found out about useGSAP custom hook but for what I've seen so far I still see it as more appropriate for when one single component makes use of animations (which is not my case). So in the end this is just me thinking out loud and deciding to reach the experts for some advice. No bugs or problems whatsoever, just me wondering how to make my application better. As a side note, I am a really big fan of the work you've done so far and the GSAP library just make everything so much easier! Cheers!