title: React.js: Non-CSS animations
body: <p><a href="http://facebook.github.io/react/docs/" rel="noreferrer">React documentation</a> doesn’t have anything about handling animations that are not CSS transitions, such as animation of scroll position and SVG attributes.</p>
  
  <p>As for CSS transitions, there is <a href="http://facebook.github.io/react/docs/animation.html" rel="noreferrer">an add-on</a>.</p>
  
  <p>Here is <a href="http://jsfiddle.net/NV/szrbs/" rel="noreferrer">a simple SVG example example</a>:</p>
  
  <p><a href="http://jsfiddle.net/NV/szrbs/" rel="noreferrer"><img src="https://i.stack.imgur.com/33DDr.gif" alt="Animated SVG circle"></a></p>
  
  <pre><code>/**
   * @jsx React.DOM
   */
  
  
  function animate(duration, onStep) {
      var start = Date.now();
      var timer = {id: 0};
      (function loop() {
          timer.id = requestAnimationFrame(function() {
              var diff = Date.now() - start;
              var fraction = diff / duration;
              onStep(fraction);
              if (diff &lt; duration) {
                  loop();
              }
          });
      })();
      return timer;
  }
  
  function lerp(low, high, fraction) {
      return low + (high - low) * fraction;
  }
  
  
  var App = React.createClass({
      getInitialState: function() {
          return {x: 0}
      },
  
      move: function(i) {
          this.setState({x: this.state.x + i * 100});
      },
  
      render: function() {
          return &lt;div className="ShowerItem"&gt;
              &lt;p&gt;
                  &lt;button onClick={this.move.bind(this, -1)}&gt;Left&lt;/button&gt;
                  &lt;button onClick={this.move.bind(this, 1)}&gt;Right&lt;/button&gt;
              &lt;/p&gt;
              &lt;svg&gt;&lt;Dot x={this.state.x}/&gt;&lt;/svg&gt;
          &lt;/div&gt;;
      }
  });
  
  
  
  var Dot = React.createClass({
  
      getInitialState: function() {
          return {
              x: 0,
              final: 0
          };
      },
  
      timer: null,
  
      render: function() {
          var from = this.state.x;
          var to = this.props.x;
          if (to !== this.state.final) {
              this.state.final = to;
              if (this.timer) {
                  cancelAnimationFrame(this.timer.id);
              }
  
              this.timer = animate(500, function(fraction) {
                  var x = lerp(from, to, fraction);
                  if (fraction &gt;= 1) {
                      this.setState({
                          value: to
                      });
                      this.timer = null;
                  } else {
                      this.setState({x: x});
                  }
              }.bind(this))
          }
  
          return &lt;circle r="10" cy="10" cx={this.state.x + 10}/&gt;
      }
  });
  
  
  React.renderComponent(
      &lt;App/&gt;,
      document.body
  );
  </code></pre>
  
  <p>Is there a more efficient way of doing animations?<br>
  It the code architecture right?</p>
  
  <p><a href="http://facebook.github.io/react/docs/animation.html" rel="noreferrer">CSS Transitions add-on</a> doesn't help here since I don't use CSS.</p>