Rebound animated button with ReactJS.

thumbs.js

/**
 * @jsx React.DOM
 */
var React = require('react');
var rebound = require('rebound');



var Thumb = React.createClass({
	componentDidMount: function() {
		var _this = this;

		this.el = this.refs.thumb.getDOMNode();

		this.springSystem = new rebound.SpringSystem();

		this.spring = this.springSystem.createSpring(25, 3);

		this.spring.addListener({
			onSpringUpdate: function(spring) {
				var val = spring.getCurrentValue();

					val = rebound.MathUtil
						.mapValueInRange(val, 0, 1, 1, 0.5);

				_this.scale(_this.el, val);
			}
		});

		// Toggle the springs endValue from 0 to 1.

		// Listen for mouse down or touchstart 
		this.el.addEventListener('mousedown', function() {
			_this.spring.setEndValue(1);
		});

		this.el.addEventListener('touchstart', function() {
			_this.spring.setEndValue(1);
		});

		// Listen for mouse out or touch leave
		this.el.addEventListener('mouseout', function() {
			_this.spring.setEndValue(0);
		});

		this.el.addEventListener('touchleave', function() {
			_this.spring.setEndValue(0);
		});

		// Listen for mouse up or touch end
		this.el.addEventListener('mouseup', function() {
			_this.spring.setEndValue(0);
		});

		this.el.addEventListener('touchend', function() {
			_this.spring.setEndValue(0);
		});
	},

	render: function() {
		var isPositive = this.props.isPositive;

		var cx = React.addons.classSet;

		var classes = cx({
			"evaluator": true,
			"positive": isPositive,
			"negative": !isPositive
		});

		return (
			<div className={classes} 
				ref="thumb"
				onClick={this.props.onClick} />
		);
	},

	// Get a reference to the logo element.
	el: undefined,

	// create a SpringSystem and a Spring with a bouncy config.
	springSystem: undefined,

	spring: undefined,

	// Helper for scaling an element with css transforms.
	scale: function (el, val) {
		el.style.mozTransform =
		el.style.msTransform =
		el.style.webkitTransform =
		el.style.transform = 'scale3d(' +
		val + ', ' + val + ', 1)';
	}
});

module.exports = Thumb;