Animation logic in an animated React component

[Romanus]

Hello! I am using gsap in react. I would like to put all the animation logic in the component that is being animated. In order for the MenuPage animation to be found in MenuPage. But I put this animation in the parent component, because it contains the state responsible for the variable rendering. I start the closing animation, and then I remove the element.
When I want to make changes, I have to remember exactly where the animation is. This started to bother me when I made a lot of modal windows and started to fine-tune the structure of the application. I want everything to be in place
Maybe somehow you can register the animation in one place, and call it in another. Or maybe you have ideas how to make it more convenient.
If you need I can make an example to illustrate the question

[Rodrigo]

Hi,

 

If you want to keep the animation logic inside a component that you want to mount and unmount, the simplest approach I can think of is using React Transition Group, most specifically the Transition component.

 

Here is an updated example using the latest versions of GSAP, React and Transition Group:

https://codesandbox.io/s/gsap-powered-modal-forked-k7ivt5?file=/src/App.js

 

You can find how the modal is implemented in the Modal.js file.

 

Also the example uses GSAP's Context in order to simplify selectors in GSAP instances.

 

Let us know if you have any other questions.

 

Happy Tweening!