title: react: fade-in/slide-in animation when render component
body: <p>I'm new in React. I have made a small app with a button and a list of image urls. When button is clicked, an image url is added to the list. I render the list of image urls with standard <code>.map</code> function. </p>
  
  <p>I would like to make a fast ui animation effect when the image is displayed: a combination of fade-in and slide-in from left. I tried Velocity.js and found the <code>velocity-react</code> wrapper. But I can not understand how to use it. The same goes for the 'standard' <code>velocity-animate</code> library.</p>
  
  <p>What is best? <code>velocity-react</code>, <code>velocity-animate</code> or something else? 
  And how do I do it?</p>
  
  <p><em>JSX</em></p>
  
  <pre><code>&lt;div className="row"&gt;
    {
      this.state.images.map( (image, index) =&gt; { return this.renderThumb(image, index); } )
    }
  &lt;/div&gt;
  </code></pre>
  
  <p><em>renderThumb function</em></p>
  
  <pre><code>renderThumb(image, index) {
    return (
      &lt;div ref="tweetImage" key={`image-${index}`} className="col-xs-3 tweetImage"&gt;
        &lt;img className="img-thumbnail" src={image} alt="my pic"/&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p><em>velocity-react</em></p>
  
  <p>I tried  to wrap <code>&lt;img&gt;</code> animation opacity from 0 to 1 like this (copied from docs):</p>
  
  <pre><code>&lt;VelocityComponent animation={{ opacity: 1 }} duration={ 500 }&gt;
    &lt;img className="img-thumbnail" src={image} alt="my pic"/&gt;
  &lt;/VelocityComponent
  </code></pre>
  
  <p>I keep getting this error:</p>
  
  <p><em>Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object</em></p>
  
  <hr>
  
  <p>No luck with <code>ReactCSSTransitionGroup</code> either (like suggestions below). Images are shown but without animation:</p>
  
  <pre><code>renderThumb(image, index) {
    return (
      &lt;div ref="tweetImage" key={`image-${index}`} className="col-xs-3"&gt;
        &lt;ReactCSSTransitionGroup
          transitionName="example"&gt;
            &lt;img className="img-thumbnail" src={image} alt="Ole Frank Jensen"/&gt;
        &lt;/ReactCSSTransitionGroup&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <hr>
  
  <p><strong>SOLVED:</strong></p>
  
  <p>I moved <code>&lt;ReactCSSTransitionGroup transitionName="example"&gt;</code> outside of the fading component and voilá :-)</p>
  
  <p><em>render()</em></p>
  
  <pre><code>&lt;div className="row"&gt;
    &lt;ReactCSSTransitionGroup transitionName="example"&gt;
      {
        this.state.images.map( (image, index) =&gt; { return this.renderThumb(image, index); } )
      }
    &lt;/ReactCSSTransitionGroup&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><em>renderThumb()</em></p>
  
  <pre><code>renderThumb(image, index) {
    return (
      &lt;div key={`image-${index}`} className="col-xs-3"&gt;
        &lt;img className="img-thumbnail" src={image} alt="Ole Frank Jensen"/&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>