Something this simple should be easily accomplished, yet I&#39;m pulling my hair out over how complicated it is.

All I want to do is animate the mounting &amp; unmounting of a React component, that&#39;s it. Here&#39;s what I&#39;ve tried so far and why each solution won&#39;t work:

1. `ReactCSSTransitionGroup` - I&#39;m not using CSS classes at all, it&#39;s all JS styles, so this won&#39;t work.
2. `ReactTransitionGroup` - This lower level API is great, but it requires you to use a callback when the animation is complete, so just using CSS transitions won&#39;t work here. There are always animation libraries, which leads to the next point:
3. GreenSock - The licensing is too restrictive for business use IMO.
4. React Motion - This seems great, but `TransitionMotion` is extremely confusing and overly complicated for what I need.
5. Of course I can just do trickery like Material UI does, where the elements are rendered but remain hidden (`left: -10000px`) but I&#39;d rather not go that route. I consider it hacky, and I *want* my components to unmount so they clean up and are not cluttering up the DOM.

I want something that&#39;s *easy* to implement. On mount, animate a set of styles; on unmount, animate the same (or another) set of styles. Done. It also has to be high performance on multiple platforms.

I&#39;ve hit a brick wall here. If I&#39;m missing something and there&#39;s an easy way to do this, let me know.

All React Motion Solutions on Gang of Coders

Total of 1 React Motion Solutions

React - animate mount and unmount of a single component