title: What is the best approach to build sequential animations with Reactjs?
body: <p>There are various tools to help an individual to build animations with ReactJs. But each one has its own shortcomings. Following are the tools that I've explored till now:</p>
  
  <p><strong>ReactCSSTransitionGroup</strong> : Quite effective but I don't like how it introduces coupling between CSS and Javascript. For example:</p>
  
  <pre><code>    &lt;ReactCSSTransitionGroup
          transitionName="example"
          transitionEnterTimeout={700}
          transitionLeaveTimeout={700}
      &gt;&lt;/ReactCSSTransitionGroup&gt;
  </code></pre>
  
  <p>Now one needs to add classes like example-enter, example-leave, example-enter-active and example-leave-active in CSS. Not a big fan of this. Besides this is not easy to manage when one is going for complex sequential animations.</p>
  
  <p><strong>ReactMotion</strong> : Another powerful tool. Useful for sequential animations as well. But implements them through delays which is not a goo approach for complex animations as introducing new elements into the chain would mean altering the delays for other elements.</p>
  
  <p><strong>ReactTransitionGroup</strong> So far my favorite solution. It exposes lifecycle hooks and one can manage the animations using tried and tested libraries like <strong>GSAP</strong> and managing complex pieces is quite easy. But it works on the DOM nodes and we know that whatever changes React undergoes outside its render method, it is not aware of that. So even though it achieves the desired output, it goes against React's way of working. For example, one can look at this fiddle <a href="https://jsfiddle.net/tahirahmed/h68s0zod/" rel="nofollow noreferrer">https://jsfiddle.net/tahirahmed/h68s0zod/</a> (I didn't make this I stumbled upon it while doing my research.)</p>
  
  <p>I understand that animations happen on DOM nodes and for production environments it makes total sense to use tried and tested solutions like <strong>GSAP</strong> or <strong>VelocityJs</strong> or <strong>AnimeJs</strong>. But how to make sure that all that plays well with React?</p>
  
  <p>P.S. - I have tried solutions like <strong>Velocity-React</strong> and <strong>React-GSAP-Enhancer</strong> but they don't seem to get the job done as for sequential animations, they tend to rely on delays and not promises. Besides they do forced updates which is not a good way to go.</p>