How do you manage animation timeline across next app?

[sagar_dev]

I am a junior frontend developer with little knowledge working with GSAP. I have only used GSAP for small animations in some component. But, now I have got a project where I want to apply animation across the page. My question is how can I write GSAP animation that seems fluid and match with other elements. 

 

Currently I am doing lots of magic numbers across different component. I write animation code for each component in their own component file and to match them with other component I am doing magic numbers with delay and duration. 

 

Please Help.

[elegantseagulls]

You can setup animation components and import those into your other components in to avoid repeating code.

Also, we've found using https://greensock.com/docs/v3/GSAP/gsap.registerEffect() and making the effects into hooks works pretty well across bigger projects.

[sagar_dev]

I found this in the forum. This might me helpful as well.

[Cassie]

Quote

Also, we've found using https://greensock.com/docs/v3/GSAP/gsap.registerEffect() and making the effects into hooks works pretty well across bigger projects.

 

More info here - https://greensock.com/react-advanced#hooks