Rough touch support idea for React Magician

gistfile1.txt

/**
 * @jsx React.DOM
 */
'use strict';

var React           = require('react');
var Animation       = require('react-magician');

class Foo extends React.Component {

  constructor() {

    this.animations = {
      fooBarAnimation: Animation.create({
        '0px': {
          blockA: {
            left: 0,
            top: 0
          },
          blockB: {
            left: 0,
            top: 0
          }
        },
        '100px': {
          blockA: {
            easing: 'easeInQuad',
            left: 100,
            top: 200
          },
          blockB: {
            left: 10,
            top: 60
          }
        }
      })
    };
  }

  render() {
    var fooBarAnimationValues = this.animations.fooBarAnimation.values(this);
    return <div onTouchStart={this.onTouchStart} onTouchMove={this.onTouchMove}>
      <div style={fooBarAnimationValues.blockA}></div>
      <div style={fooBarAnimationValues.blockB}></div>
    </div>;
  }
  
  onTouchStart() {
    // register start position
  }
  
  onTouchMove() {
    // how far are we from the start position? set the animation to that position
    // force update
  }

}

React.render(<Foo />, document.getElementById('app'));