gistfile1.html

<style>
 /* React Animation CSS */
    .fade-enter {
      opacity: 0.01;
      transition: opacity 1s ease-in;
    }
    .fade-enter.fade-enter-active {
      opacity: 1;
    }    
    .fade-leave {
      opacity: 1;
      transition: opacity 1s ease-in;
    }
    .fade-leave.fade-leave-active {
      opacity: 0.01;
    }
  </style>
  
  
  
  <script src="build/react.js"></script>
  <script src="build/JSXTransformer.js"></script>
  <script src="build/react-with-addons.js"></script>
  
  
  <script type="text/jsx">
    /*** @jsx React.DOM */
    
    var CTG = React.addons.CSSTransitionGroup;
    var INTERVAL = 3000;
    
    var Animate = React.createClass({
      getInitialState: function() {
        return (
          {
            currentImg: 0,
            imgPaths: ['iphone_png/sizedscreen_aggregate.png',
                       'iphone_png/sizedscreen_enterkey.png',
                       'iphone_png/sizedscreen_gate.png',
                       'iphone_png/sizedscreen_selectgate.png',
                       'iphone_png/sizedscreen_unlockgate.png']
          } 
        )
      },
      
      componentDidMount: function() {
        setInterval(this.getCurrentImg, INTERVAL);
      },
      
      getCurrentImg: function() {
        if(this.state.currentImg > this.state.imgPaths.length) {
          this.setState({currentImg: 0});
        }
        else {
          this.setState({currentImg: this.state.currentImg + 1 });
        }
      },
      
      render: function() {
        var screenSrc = this.state.imgPaths[this.state.currentImg];
        
        return (
          <CTG transitionName="fade">
            <img src={screenSrc} key={screenSrc} className="screen" />
          </CTG>
        )
      }
    });
    
    React.renderComponent(<Animate />, document.getElementById('screens'));
    
  </script>