title: react animation on img src change from an array
body: <p>I have this react code that changes the img src onClick, it gets the new img src from an array, I now want to add an animation to it using react-motion, Everytime the img src changes I want to play the animation so far I got it working threw a ? statement however it only plays every other time it changes I think its very similar to what Im doing. here is the code:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { fetchPosts } from '../actions/index';
  import { Link } from 'react-router';
  
  export default class HomePage extends Component {
      constructor() {
          this.state = { index : 0 };
          this.blogPostImages = ['./img/placeholder.jpg', './img/placeholderB.jpg', './img/placeholderC.png'];
      }
  
      changeBlogPicForwards() {
          let i = this.state.index;
          if (i == this.blogPostImages.length - 1) {
              i = 0; 
          } else {
              i = i + 1; 
          }
          this.setState({index: i});
      }
  
      changeBlogPicBackwards() {
          let i = this.state.index;
          if (i == 0) {
              i = this.blogPostImages.length - 1; 
          } else {
              i = i - 1;
          }
          this.setState({index: i});
      }
  
      render() {
          var blogCurrentPic = this.blogPostImages[this.state.index];
  
          return (
              &lt;div&gt;
                  &lt;div className="top-section-actions"&gt;
                             &lt;Motion style={{ x: spring( this.state.index ? 1:0 ) }}&gt;
                              {({ x }) =&gt;
                                  &lt;div className="image-holder"&gt;
                                      &lt;img className="blog-pictures" src={blogCurrentPic} style={{
                                          WebkitTransform: `translate3d(${x}px, 0, 0)`,
                                          transform: `scale(${x}, ${x})`,
                                      }} /&gt;
                                  &lt;/div&gt;
                              }
                          &lt;/Motion&gt;
                      &lt;div className="blog-name"&gt;
                          &lt;div className="left-arrow-action arrow-icons"&gt;
                              &lt;i onClick={(e) =&gt; this.changeBlogPicForwards(e)} className="fa fa-arrow-circle-o-left fa-2x" aria-hidden="true"&gt;&lt;/i&gt;
                          &lt;/div&gt;
                          &lt;div className="right-arrow-action arrow-icons"&gt;
                              &lt;i onClick={(e) =&gt; this.changeBlogPicBackwards(e)} className="fa fa-arrow-circle-o-right fa-2x" aria-hidden="true"&gt;&lt;/i&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p>The type of animation I want does not matter since Im just trying to play any animation after the img src changes,</p>