title: One material card, Multiple animations using react-addons-transition-group
body: <p>I have a <code>&lt;Card&gt;</code> component from material-ui. It has a CardHeader, CardText and other pieces that come together to make the whole card.</p>
  
  <p>I am able to use <code>react-addons-transition-group</code> to animate this card as it enters the screen (componentWillEnter). This works great with:</p>
  
  <pre><code>export class MyCard extends React.Component {
       constructor(props) {
          super(props);   
        }
  
    componentWillEnter (callback) {
      const el = findDOMNode(this);
      TweenMax.fromTo(el, 0.4, {y: 100, opacity: 0}, {y: 0, opacity: 1, onComplete: callback});
    }
  
  render(){
  
      return &lt;Card&gt;
                   &lt;h1&gt; Blah Blah Title &lt;h1&gt;
                   &lt;CardText&gt; Blah Blah &lt;/CardText&gt;
                 &lt;/Card&gt;
      }
  }
  </code></pre>
  
  <p>Then the above gets rendered in another component like so:</p>
  
  <pre><code>&lt;ReactTransitionGroup&gt; &lt;MyCard&gt; &lt;/ReactTransitionGroup&gt;
  </code></pre>
  
  <p>Wrapping it in <code>ReactTransitionGroup</code> makes sure it calls the <code>componentWillEnter</code> gets called, and the animation runs. This works as expected.</p>
  
  <p><strong>What I would like to do is multiple animations.</strong> So, the Card comes in from the left, the CardText comes in from the top, and the h1 comes in from the right-- or something to that affect.</p>
  
  <p>Ideally, I would just do something like:</p>
  
  <pre><code>    componentWillEnter (callback) {
          const el = findDOMNode(Card);
          const el = findDOMNode(h1);
          const el = findDOMNode(CardText);
  
          TweenMax.fromTo(Card, 0.4, {y: 100, opacity: 0}, {y: 0, opacity: 1, onComplete: callback});
  
  TweenMax.fromTo(h1, 0.4, {y: 100, opacity: 0}, {y: 0, opacity: 1, onComplete: callback});
  
  TweenMax.fromTo(CardText, 0.4, {y: 100, opacity: 0}, {y: 0, opacity: 1, onComplete: callback});
        }
  </code></pre>
  
  <p>Of course, this doesn't work.</p>
  
  <p>So my question is, how do I go about parsing the <code>this</code> instance of the component so I can animate each individual part?</p>
  
  <p>I couldn't really find much on <code>findDOMNode</code>. It doesn't seem I can add id tags to the different parts and use those in <code>findDOMNode</code>. Or maybe I'm going about it all wrong.</p>