Animating react-transition-group with ReactDOM createPortal

Question

I have been breaking my head trying to figure out how to accomplish something that I figured would be quite simple (I know...)

Goal is for a very minimal, and reusable modal component that I can animate in some sort of HOC with a trigger button or w/e.

I am creating it using createPortal, and the goal is to have some simple animations be added to on enter/exit of said portal.

I have gotten this to work using GSAP, but ideally I would love for this to go along with SC instead so that I don't have to pull in another animation library.

For the life of me I just cannot get this to work with SC and would love if someone could point me in the right direction.

I have made a sandbox here: https://codesandbox.io/s/r44w9m4o5p using GSAP to run the animations, and it's a bit hacky but it is in the proper direction for what I am going for.

Also, is there a benefit to using react-transition-group over something like https://github.com/react-tools/react-move?

Answer 1

You can use the CSSTransition component instead of Transition. CSSTransition will just toggle approriate class names using given animation timings: .*-enter, .*-enter-active for in-transition and .*-exit, .*-exit-active for out-transition. So you can define all transitions using CSS3 properties with styled-components.

Take a look at my fork: https://codesandbox.io/s/zz95v5103

I've just extended your Modal with transition styles. Note that extending styles requires className property for the component to be extended, so I've added that property to your Modal component.