{"_id":"react-tween-state","_rev":"360181","name":"react-tween-state","description":"React animation.","dist-tags":{"latest":"0.1.5"},"maintainers":[{"name":"chenglou","email":"chenglou92@gmail.com"}],"time":{"modified":"2021-07-13T08:47:55.000Z","created":"2014-07-15T02:24:32.929Z","0.1.5":"2016-04-28T23:53:41.133Z","0.1.4":"2015-11-21T06:53:17.228Z","0.1.3":"2015-07-04T16:57:04.643Z","0.1.2":"2015-07-04T16:47:44.645Z","0.1.1":"2015-06-22T02:12:30.169Z","0.1.0":"2015-06-22T02:00:15.538Z","0.0.5":"2015-03-17T04:18:19.697Z","0.0.4":"2014-11-14T17:59:05.012Z","0.0.3":"2014-09-03T00:48:14.853Z","0.0.2":"2014-07-26T22:54:12.133Z","0.0.1":"2014-07-15T02:34:07.408Z","0.0.0":"2014-07-15T02:24:32.929Z"},"users":{"wzbwan":true,"fattenap":true,"laiff":true,"andreipopovici":true,"vlaw":true,"guanzh":true},"author":{"name":"Cheng Lou"},"repository":{"type":"git","url":"git+https://github.com/chenglou/react-tween-state.git"},"versions":{"0.1.5":{"name":"react-tween-state","version":"0.1.5","description":"React animation.","main":"lib/index.js","directories":{"examples":"examples"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"webpack -p","start":"webpack -w -d"},"repository":{"type":"git","url":"git+https://github.com/chenglou/react-tween-state.git"},"keywords":["react","animation","tween","transition","state","interactive","mixin","interpolation"],"author":{"name":"Cheng Lou"},"license":"BSD","bugs":{"url":"https://github.com/chenglou/react-tween-state/issues"},"homepage":"https://github.com/chenglou/react-tween-state","devDependencies":{"babel-core":"^5.6.1","babel-loader":"^5.1.4","node-libs-browser":"^0.5.2","webpack":"^1.9.11","react-dom":">=0.14","react":">=0.14"},"dependencies":{"raf":"^3.1.0","tween-functions":"^1.0.1"},"gitHead":"5738c88fadcf5b4e9d9e32115bc702427c02fe22","_id":"react-tween-state@0.1.5","_shasum":"e98b066551efb93cb92dd1be14995c2e3deae339","_from":".","_npmVersion":"3.5.3","_nodeVersion":"5.5.0","_npmUser":{"name":"chenglou","email":"chenglou92@gmail.com"},"maintainers":[{"name":"chenglou","email":"chenglou92@gmail.com"}],"dist":{"shasum":"e98b066551efb93cb92dd1be14995c2e3deae339","size":12545,"noattachment":false,"key":"/react-tween-state/-/react-tween-state-0.1.5.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-tween-state/download/react-tween-state-0.1.5.tgz"},"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/react-tween-state-0.1.5.tgz_1461887620732_0.27743913931772113"},"publish_time":1461887621133,"_cnpm_publish_time":1461887621133,"_hasShrinkwrap":false},"0.1.4":{"name":"react-tween-state","version":"0.1.4","description":"React animation.","main":"lib/index.js","directories":{"examples":"examples"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"webpack -p","start":"webpack -w -d"},"repository":{"type":"git","url":"git+https://github.com/chenglou/react-tween-state.git"},"keywords":["react","animation","tween","transition","state","interactive","mixin","interpolation"],"author":{"name":"Cheng Lou"},"license":"BSD","bugs":{"url":"https://github.com/chenglou/react-tween-state/issues"},"homepage":"https://github.com/chenglou/react-tween-state","devDependencies":{"babel-core":"^5.6.1","babel-loader":"^5.1.4","node-libs-browser":"^0.5.2","webpack":"^1.9.11"},"peerDependencies":{"react-dom":"^0.14.2","react":">=0.14"},"dependencies":{"raf":"^3.1.0","tween-functions":"^1.0.1"},"gitHead":"49e12eefab3616664d93f2ac06349bf65a70c652","_id":"react-tween-state@0.1.4","_shasum":"251ee0e68ccc5e2f602dc6e32725177af16ac748","_from":".","_npmVersion":"2.14.6","_nodeVersion":"4.1.2","_npmUser":{"name":"chenglou","email":"chenglou92@gmail.com"},"maintainers":[{"name":"chenglou","email":"chenglou92@gmail.com"}],"dist":{"shasum":"251ee0e68ccc5e2f602dc6e32725177af16ac748","size":12491,"noattachment":false,"key":"/react-tween-state/-/react-tween-state-0.1.4.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-tween-state/download/react-tween-state-0.1.4.tgz"},"publish_time":1448088797228,"_cnpm_publish_time":1448088797228,"_hasShrinkwrap":false},"0.1.3":{"name":"react-tween-state","version":"0.1.3","description":"React animation.","main":"lib/index.js","directories":{"examples":"examples"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"webpack -w -d"},"repository":{"type":"git","url":"git+https://github.com/chenglou/react-tween-state.git"},"keywords":["react","animation","tween","transition","state","interactive","mixin","interpolation"],"author":{"name":"Cheng Lou"},"license":"BSD","bugs":{"url":"https://github.com/chenglou/react-tween-state/issues"},"homepage":"https://github.com/chenglou/react-tween-state","devDependencies":{"babel-core":"^5.6.1","babel-loader":"^5.1.4","node-libs-browser":"^0.5.2","react":"^0.13.3","webpack":"^1.9.11"},"dependencies":{"tween-functions":"^1.0.1"},"gitHead":"fab7df3c08843342cea96a7f46e45c1f01786a4a","_id":"react-tween-state@0.1.3","_shasum":"e86a0f06150a79d156f5b635fcbb262b410fa775","_from":".","_npmVersion":"2.10.1","_nodeVersion":"0.12.4","_npmUser":{"name":"chenglou","email":"chenglou92@gmail.com"},"dist":{"shasum":"e86a0f06150a79d156f5b635fcbb262b410fa775","size":11584,"noattachment":false,"key":"/react-tween-state/-/react-tween-state-0.1.3.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-tween-state/download/react-tween-state-0.1.3.tgz"},"maintainers":[{"name":"chenglou","email":"chenglou92@gmail.com"}],"publish_time":1436029024643,"_cnpm_publish_time":1436029024643,"_hasShrinkwrap":false},"0.1.2":{"name":"react-tween-state","version":"0.1.2","description":"React animation.","main":"lib/index.js","directories":{"examples":"examples"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"webpack -w -d"},"repository":{"type":"git","url":"git+https://github.com/chenglou/react-tween-state.git"},"keywords":["react","animation","tween","transition","state","interactive","mixin","interpolation"],"author":{"name":"Cheng Lou"},"license":"BSD","bugs":{"url":"https://github.com/chenglou/react-tween-state/issues"},"homepage":"https://github.com/chenglou/react-tween-state","devDependencies":{"babel-core":"^5.6.1","babel-loader":"^5.1.4","node-libs-browser":"^0.5.2","react":"^0.13.3","webpack":"^1.9.11"},"dependencies":{"tween-functions":"^1.0.1"},"gitHead":"3904baef2234ed88b28210fc11aeee62d1bac8e0","_id":"react-tween-state@0.1.2","_shasum":"65bdaa6c2da52bee36cc9ea5353faef65ce04a1c","_from":".","_npmVersion":"2.10.1","_nodeVersion":"0.12.4","_npmUser":{"name":"chenglou","email":"chenglou92@gmail.com"},"dist":{"shasum":"65bdaa6c2da52bee36cc9ea5353faef65ce04a1c","size":11800,"noattachment":false,"key":"/react-tween-state/-/react-tween-state-0.1.2.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-tween-state/download/react-tween-state-0.1.2.tgz"},"maintainers":[{"name":"chenglou","email":"chenglou92@gmail.com"}],"publish_time":1436028464645,"_cnpm_publish_time":1436028464645,"_hasShrinkwrap":false},"0.1.1":{"name":"react-tween-state","version":"0.1.1","description":"React animation.","main":"lib/index.js","directories":{"examples":"examples"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"webpack -w -d"},"repository":{"type":"git","url":"git+https://github.com/chenglou/react-tween-state.git"},"keywords":["react","animation","tween","transition","state","interactive","mixin","interpolation"],"author":{"name":"Cheng Lou"},"license":"BSD","bugs":{"url":"https://github.com/chenglou/react-tween-state/issues"},"homepage":"https://github.com/chenglou/react-tween-state","devDependencies":{"babel-core":"^5.6.1","babel-loader":"^5.1.4","node-libs-browser":"^0.5.2","react":"^0.13.3","webpack":"^1.9.11"},"dependencies":{"tween-functions":"^1.0.1"},"gitHead":"4093eeff9706a5dc79d314c1f6172fed3c51eebb","_id":"react-tween-state@0.1.1","_shasum":"d7ffce2d2557b5727d1e7c744c671b19640381a3","_from":".","_npmVersion":"2.10.1","_nodeVersion":"0.12.4","_npmUser":{"name":"chenglou","email":"chenglou92@gmail.com"},"dist":{"shasum":"d7ffce2d2557b5727d1e7c744c671b19640381a3","size":11776,"noattachment":false,"key":"/react-tween-state/-/react-tween-state-0.1.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-tween-state/download/react-tween-state-0.1.1.tgz"},"maintainers":[{"name":"chenglou","email":"chenglou92@gmail.com"}],"publish_time":1434939150169,"_cnpm_publish_time":1434939150169,"_hasShrinkwrap":false},"0.1.0":{"name":"react-tween-state","version":"0.1.0","description":"React animation.","main":"lib/index.js","directories":{"examples":"examples"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"webpack -w -d"},"repository":{"type":"git","url":"git+https://github.com/chenglou/react-tween-state.git"},"keywords":["react","animation","tween","transition","state","interactive","mixin","interpolation"],"author":{"name":"Cheng Lou"},"license":"BSD","bugs":{"url":"https://github.com/chenglou/react-tween-state/issues"},"homepage":"https://github.com/chenglou/react-tween-state","devDependencies":{"babel-core":"^5.6.1","babel-loader":"^5.1.4","node-libs-browser":"^0.5.2","react":"^0.13.3","webpack":"^1.9.11"},"dependencies":{"tween-functions":"^1.0.1"},"gitHead":"5131dcea51224b52dab3a8791c5dc3e0fa7491f7","_id":"react-tween-state@0.1.0","_shasum":"13190a643d97416f30629e72a3f9d69bfc5d7400","_from":".","_npmVersion":"2.10.1","_nodeVersion":"0.12.4","_npmUser":{"name":"chenglou","email":"chenglou92@gmail.com"},"dist":{"shasum":"13190a643d97416f30629e72a3f9d69bfc5d7400","size":9156,"noattachment":false,"key":"/react-tween-state/-/react-tween-state-0.1.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-tween-state/download/react-tween-state-0.1.0.tgz"},"maintainers":[{"name":"chenglou","email":"chenglou92@gmail.com"}],"publish_time":1434938415538,"_cnpm_publish_time":1434938415538,"_hasShrinkwrap":false},"0.0.5":{"name":"react-tween-state","version":"0.0.5","description":"React animation.","main":"index.js","directories":{"examples":"examples"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build-bower":"browserify -s tweenState index.js > index-bower.js"},"repository":{"type":"git","url":"https://github.com/chenglou/react-tween-state.git"},"keywords":["react","animation","tween","transition","state","interactive","mixin","interpolation"],"author":{"name":"Cheng Lou"},"license":"BSD","bugs":{"url":"https://github.com/chenglou/react-tween-state/issues"},"homepage":"https://github.com/chenglou/react-tween-state","devDependencies":{"browserify":"^6.3.2"},"dependencies":{"tween-functions":"^1.0.1"},"gitHead":"f8cbdf3b440281ea591d8055e08918730e8e453f","_id":"react-tween-state@0.0.5","_shasum":"bd25c27f2558b839a6c7aee3b85fab967760d1d2","_from":".","_npmVersion":"2.7.0","_nodeVersion":"0.10.36","_npmUser":{"name":"chenglou","email":"chenglou92@gmail.com"},"maintainers":[{"name":"chenglou","email":"chenglou92@gmail.com"}],"dist":{"shasum":"bd25c27f2558b839a6c7aee3b85fab967760d1d2","size":5305,"noattachment":false,"key":"/react-tween-state/-/react-tween-state-0.0.5.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-tween-state/download/react-tween-state-0.0.5.tgz"},"publish_time":1426565899697,"_cnpm_publish_time":1426565899697,"_hasShrinkwrap":false},"0.0.4":{"name":"react-tween-state","version":"0.0.4","description":"React animation.","main":"index.js","directories":{"examples":"examples"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build-bower":"browserify -s tweenState index.js > index-bower.js"},"repository":{"type":"git","url":"https://github.com/chenglou/react-tween-state.git"},"keywords":["react","animation","tween","transition","state","interactive","mixin","interpolation"],"author":{"name":"Cheng Lou"},"license":"BSD","bugs":{"url":"https://github.com/chenglou/react-tween-state/issues"},"homepage":"https://github.com/chenglou/react-tween-state","devDependencies":{"browserify":"^6.3.2"},"gitHead":"97a4e81e6642d0f12b222b3efcf95524fa7988f8","_id":"react-tween-state@0.0.4","_shasum":"a2fc60c03b360bd5c28134de63afdad6846e370e","_from":".","_npmVersion":"2.1.6","_nodeVersion":"0.10.33","_npmUser":{"name":"chenglou","email":"chenglou92@gmail.com"},"maintainers":[{"name":"chenglou","email":"chenglou92@gmail.com"}],"dist":{"shasum":"a2fc60c03b360bd5c28134de63afdad6846e370e","size":6041,"noattachment":false,"key":"/react-tween-state/-/react-tween-state-0.0.4.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-tween-state/download/react-tween-state-0.0.4.tgz"},"publish_time":1415987945012,"_cnpm_publish_time":1415987945012,"_hasShrinkwrap":false},"0.0.3":{"name":"react-tween-state","version":"0.0.3","description":"React animation.","main":"index.js","directories":{"examples":"examples"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"https://github.com/chenglou/react-tween-state.git"},"keywords":["react","animation","tween","transition","state","interactive","mixin","interpolation"],"author":{"name":"Cheng Lou"},"license":"BSD","bugs":{"url":"https://github.com/chenglou/react-tween-state/issues"},"homepage":"https://github.com/chenglou/react-tween-state","_id":"react-tween-state@0.0.3","_shasum":"2e2b3eee85d662516f172b2076c80c46baff7d37","_from":".","_npmVersion":"1.4.7","_npmUser":{"name":"chenglou","email":"chenglou92@gmail.com"},"maintainers":[{"name":"chenglou","email":"chenglou92@gmail.com"}],"dist":{"shasum":"2e2b3eee85d662516f172b2076c80c46baff7d37","size":5744,"noattachment":false,"key":"/react-tween-state/-/react-tween-state-0.0.3.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-tween-state/download/react-tween-state-0.0.3.tgz"},"publish_time":1409705294853,"_cnpm_publish_time":1409705294853,"_hasShrinkwrap":false},"0.0.2":{"name":"react-tween-state","version":"0.0.2","description":"React animation.","main":"index.js","directories":{"examples":"examples"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"https://github.com/chenglou/react-tween-state.git"},"keywords":["react","animation","tween","transition","state","interactive","mixin","interpolation"],"author":{"name":"Cheng Lou"},"license":"BSD","bugs":{"url":"https://github.com/chenglou/react-tween-state/issues"},"homepage":"https://github.com/chenglou/react-tween-state","gitHead":"b343d91ec3b856ac353e5ee4684a280ac6bbdcfa","_id":"react-tween-state@0.0.2","_shasum":"e0f539af735246d64eb8b3c9a4e7d2acb830cc67","_from":".","_npmVersion":"1.5.0-alpha-1","_npmUser":{"name":"chenglou","email":"chenglou92@gmail.com"},"maintainers":[{"name":"chenglou","email":"chenglou92@gmail.com"}],"dist":{"shasum":"e0f539af735246d64eb8b3c9a4e7d2acb830cc67","size":362479,"noattachment":false,"key":"/react-tween-state/-/react-tween-state-0.0.2.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-tween-state/download/react-tween-state-0.0.2.tgz"},"publish_time":1406415252133,"_cnpm_publish_time":1406415252133,"_hasShrinkwrap":false},"0.0.1":{"name":"react-tween-state","version":"0.0.1","description":"React animation.","main":"index.js","directories":{"examples":"examples"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"https://github.com/chenglou/react-tween-state.git"},"keywords":["react","animation","tween","transition","state","interactive","mixin"],"author":{"name":"Cheng Lou"},"license":"BSD","bugs":{"url":"https://github.com/chenglou/react-tween-state/issues"},"homepage":"https://github.com/chenglou/react-tween-state","gitHead":"63c4b1bafb7b1d3d897c13a18ecfa915ab9be023","_id":"react-tween-state@0.0.1","_shasum":"fabc6c7913a5b9533bf6db0fd2a13cd5da614e80","_from":".","_npmVersion":"1.5.0-alpha-1","_npmUser":{"name":"chenglou","email":"chenglou92@gmail.com"},"maintainers":[{"name":"chenglou","email":"chenglou92@gmail.com"}],"dist":{"shasum":"fabc6c7913a5b9533bf6db0fd2a13cd5da614e80","size":361839,"noattachment":false,"key":"/react-tween-state/-/react-tween-state-0.0.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-tween-state/download/react-tween-state-0.0.1.tgz"},"publish_time":1405391647408,"_cnpm_publish_time":1405391647408,"_hasShrinkwrap":false},"0.0.0":{"name":"react-tween-state","version":"0.0.0","description":"React animation.","main":"tweenStateMixin.js","directories":{"examples":"examples"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"https://github.com/chenglou/react-tween-state.git"},"keywords":["react","animation","tween","transition","state","interactive","mixin"],"author":{"name":"Cheng Lou"},"license":"BSD","bugs":{"url":"https://github.com/chenglou/react-tween-state/issues"},"homepage":"https://github.com/chenglou/react-tween-state","gitHead":"aadec6181d7636b5dbabc898b4aee09c738e8eb0","_id":"react-tween-state@0.0.0","_shasum":"75df7ed8c3e41b3eb9a8e9fb06c07c37ffb80802","_from":".","_npmVersion":"1.5.0-alpha-1","_npmUser":{"name":"chenglou","email":"chenglou92@gmail.com"},"maintainers":[{"name":"chenglou","email":"chenglou92@gmail.com"}],"dist":{"shasum":"75df7ed8c3e41b3eb9a8e9fb06c07c37ffb80802","size":361849,"noattachment":false,"key":"/react-tween-state/-/react-tween-state-0.0.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-tween-state/download/react-tween-state-0.0.0.tgz"},"publish_time":1405391072929,"_cnpm_publish_time":1405391072929,"_hasShrinkwrap":false}},"readme":"# [React](http://facebook.github.io/react/) Tween State\n\nThe equivalent of React's `this.setState`, but for animated tweens: `this.tweenState`.\n\n[Live demo](https://rawgit.com/chenglou/react-tween-state/master/examples/index.html) and [source](https://github.com/chenglou/react-tween-state/tree/master/examples).\n\nNpm:\n```sh\nnpm install react-tween-state\n```\n\nBower:\n```sh\nbower install react-tween-state\n```\n\n## API\n\nExample usage:\n\n```js\nvar tweenState = require('react-tween-state');\nvar React = require('react');\n\nvar App = React.createClass({\n  mixins: [tweenState.Mixin],\n  getInitialState: function() {\n    return {left: 0};\n  },\n  handleClick: function() {\n    this.tweenState('left', {\n      easing: tweenState.easingTypes.easeInOutQuad,\n      duration: 500,\n      endValue: this.state.left === 0 ? 400 : 0\n    });\n  },\n  render: function() {\n    var style = {\n      position: 'absolute',\n      width: 50,\n      height: 50,\n      backgroundColor: 'lightblue',\n      left: this.getTweeningValue('left')\n    };\n    return <div style={style} onClick={this.handleClick} />;\n  }\n});\n```\n\nThe library exports `Mixin`, `easingTypes` and `stackBehavior`.\n\n#### `this.tweenState(path: String | Array<String>, configuration: Object)`\n\nThis first calls `setState` **and puts your fields straight to their final value**. Under the hood, it creates a layer that interpolates from the old value to the new. You can retrieve that tweening value using `getTweeningValue` below.\n\n`path` is the name of the state field you want to tween. If it's deeply nested, e.g. to animate `c` in {a: {b: {c: 1}}}, provide the path as `['a', 'b', 'c']`\n\n`configuration` is of the following format:\n\n```js\n{\n  easing: easingFunction,\n  duration: timeInMilliseconds,\n  delay: timeInMilliseconds,\n  beginValue: aNumber,\n  endValue: aNumber,\n  onEnd: endCallback,\n  stackBehavior: behaviorOption\n}\n```\n\n  - `easing` (default: `easingTypes.easeInOutQuad`): the interpolation function used. react-tween-state provides [frequently used interpolation](https://github.com/chenglou/tween-functions/blob/master/index.js) (exposed under `easingTypes`). To plug in your own, the function signature is: `(currentTime: Number, beginValue: Number, endValue: Number, totalDuration: Number): Number`.\n  - `duration` (default: `300`).\n  - `delay` (default: `0`). *\n  - `beginValue` (default: the current value of the state field).\n  - `endValue`.\n  - `onEnd`: the callback to trigger when the animation's done. **\n  - `stackBehavior` (default: `stackBehavior.ADDITIVE`). Subsequent tween to the same state value will be stacked (added together). This gives a smooth tween effect that is iOS 8's new default. [This blog post](http://ronnqvi.st/multiple-animations/) describes it well. The other option is `stackBehavior.DESTRUCTIVE`, which replaces all current animations of that state value by this new one.\n\n\\* For a destructive animation, starting the next one with a delay still immediately kills the previous tween. If that's not your intention, try `setTimeout` or additive animation. `DESTRUCTIVE` + `duration` 0 effectively cancels all in-flight animations, **skipping the easing function**.\n\n\\*\\* For an additive animation, since the tweens stack and never get destroyed, the end callback is effectively fired at the end of `duration`.\n\n#### `this.getTweeningValue(path: String | Array<String>)`\nGet the current tweening value of the state field. Typically used in `render`.\n\n## License\nBSD.\n","_attachments":{},"homepage":"https://github.com/chenglou/react-tween-state","bugs":{"url":"https://github.com/chenglou/react-tween-state/issues"},"license":"BSD"}