Modularizing my animations in React

[Ano]

How can I write my gsap animations in other javascript files and import those file into my components in React? I have no clue where to start hence I did not include any codepen demo. Any resource showing how to do this will be appreciated

[GSAP Helper]

Check out our starter templates below and our react guide https://gsap.com/resources/React. Show us what you've tried already and we'll be happy to point you in the right direction. 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Rodrigo]

Hi,

 

Honestly I don't see a lot of upside in taking that particular approach unless you end up writing hundreds of lines of GSAP code because of complex animations. If that's the case, that would normally mean that there will be several different elements involved in those animations, which means that you'll have to come up with one or more methods to create those GSAP instances, at the end you'll most likely end up writing and maintaining more code.

 

One way I can think if is to write all your animations in the component and then run an external function that is imported from another file:

import { factoryFunction } from "./my-file";

const myComponent = () => {
  const container = useRef();
  
  useGSAP(() => {
    factoryFunction();
  }, {
    scope: container
  });
  ...
};

That should work as expected and shouldn't create any issues.

 

Hopefully this helps.

Happy Tweening!