Best way of externalizing gsap functions on React

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

 

 

[GreenSock]

I'm not much of a React guy, so I'm the wrong guy to address your question but I wanted to make sure you knew about gsap.registerEffect() in case it's useful. 

 

As for reverting/cleanup, perhaps these ideas could help?: 

useGSAP(() => {
  fadeOut(target); // this is fine because the animations are being created inside the useGSAP()
});

// -OR-

let { contextSafe } = useGSAP();

let onClick = contextSafe(() => { // just make sure you wrap it in a contextSafe()
  fadeOut(target);
});

Perhaps @Rodrigo will have some other suggestions. 

 

4 hours ago, Alexander Paschoaletto said:

I am a really big fan of the work you've done so far and the GSAP library just make everything so much easier!

Aw, thanks for the kind words! 💚

[Rodrigo]

Mhhh... not really the implementations Jack suggests look good to me, keep in mind that using the useGSAP hook you can scope your selectors as well, even if your GSAP instances are created in a different file.

 

Of course you can get super fancy and create a hook of your own but that seems like a waste of time IMHO if you can easily export a few methods from a file. Also you can use React context, but again that seems a bit excessive as well,  so I'd just stick with the external file, is simple and easy to maintain.

 

Happy Tweening!