A simple component and mixin that wraps the excellent [react-tween-state](https://github.com/chenglou/react-tween-state).
npm install react-tweenableA simple component and mixin that wraps the excellent react-tween-state.
I think react-tween-state is awesome, but I didn't like all the touches required to make it work. If you're building an app, you don't
want to make API calls on a per-component basis. react-tweenable aims to make animations/tweens declarative.
```
npm install --save react-tweenable
`
var React = require('react');
var Tweenable = require('react-tweenable')
//Then in your render:
var tween = {"top" : {from : -100, to: 0 }, "position": "relative};
return ...some content
`
`
//A tweenable button
var React = require('react/addons');
var Tweenable = require('react-tweenable').Mixin;
var Button = React.createClass({
mixins: [Tweenable],
render: function () {
return
}
});
//Then in your consumer component
render: function() {
var tween = {"top" : {from : -100, to: 0 }};
return ;
}
`
Your tween config
Example:
`
var tween = {"top" : {
easing: Tweenable.Easing.easeInOutQuad, //any easing function with the right signature will do, react-tween-state provides plenty https://github.com/chenglou/react-tween-state/blob/master/easingTypes.js
duration: 500,
from: 0,
to: 100
}
};
``