Jump to content
GreenSock

Romanus

Animation logic in an animated React component

Recommended Posts

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 :)

Link to comment
Share on other sites

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!

  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×