[
{
"path": ".babelrc",
"content": "{\n \"presets\": [\n [\"@babel/env\", { \"modules\": \"commonjs\", \"loose\": true }],\n \"@babel/flow\",\n \"@babel/react\"\n ],\n \"plugins\": [\n [\"@babel/proposal-class-properties\", { \"loose\": true }],\n [\"transform-react-remove-prop-types\", { \"mode\": \"unsafe-wrap\" }]\n ],\n \"env\": {\n \"test\": {\n \"plugins\": [\n \"@babel/transform-modules-commonjs\"\n ]\n }\n }\n}\n"
},
{
"path": ".eslintignore",
"content": "build\ncoverage\nlib\nnode_modules\n**/*/all.js\nwebpack.*.js\nserver.js\nkarma.*.js\ntest/integration\ndemos/demo6/babel.js\ndemos/*/Demo.jsx\n"
},
{
"path": ".eslintrc",
"content": "{\n \"parser\": \"babel-eslint\",\n \"extends\": [\"airbnb\", \"prettier\"],\n \"env\": {\n \"browser\": true,\n \"es6\": true,\n \"jasmine\": true\n },\n \"rules\": {\n \"eqeqeq\": [2, \"allow-null\"],\n \"id-length\": 0,\n \"no-console\": 0, // use it for warnings\n \"no-nested-ternary\": 0,\n \"prefer-const\": 0,\n \"no-multiple-empty-lines\": 0,\n \"no-useless-escape\": 0,\n \"no-else-return\": 0,\n \"comma-dangle\": 0,\n \"lines-between-class-members\": 0,\n \"indent\": 0,\n \"operator-linebreak\": 0,\n \"object-curly-newline\": 0,\n \"function-paren-newline\": 0,\n \"prefer-destructuring\": 0,\n \"camelcase\": [\"error\", {\"allow\": [\"^UNSAFE_\"]}],\n\n \"react/jsx-wrap-multilines\": 0,\n \"react/jsx-one-expression-per-line\": 0,\n \"react/no-unused-state\": 0,\n \"react/require-default-props\": 0,\n \"react/destructuring-assignment\": 0,\n \"react/no-did-mount-set-state\": 2,\n \"react/no-multi-comp\": 0,\n \"react/jsx-boolean-value\": [2, \"always\"],\n \"react/sort-comp\": [\n 2, {\n \"order\": [\n \"displayName\",\n \"propTypes\",\n \"contextTypes\",\n \"childContextTypes\",\n \"mixins\",\n \"statics\",\n \"defaultProps\",\n \"getDefaultProps\",\n \"getInitialState\",\n \"getChildContext\",\n \"componentWillMount\",\n \"UNSAFE_componentWillMount\",\n \"componentDidMount\",\n \"componentWillReceiveProps\",\n \"UNSAFE_componentWillReceiveProps\",\n \"shouldComponentUpdate\",\n \"componentWillUpdate\",\n \"UNSAFE_componentWillUpdate\",\n \"componentDidUpdate\",\n \"componentWillUnmount\",\n \"/^on.+$/\",\n \"/^get.+$/\",\n \"/^render.+$/\",\n \"/^.+$/\", // All other methods go here\n \"render\"\n ]\n }\n ],\n\n \"max-len\": 0,\n \"no-mixed-operators\": 0,\n \"no-continue\": 0,\n \"no-restricted-syntax\": 0,\n \"no-plusplus\": 0,\n \"no-confusing-arrow\": 0,\n \"arrow-parens\": 0,\n \"arrow-body-style\": 0,\n \"react/jsx-indent\": 0,\n \"react/jsx-indent-props\": 0,\n \"react/jsx-closing-bracket-location\": 0,\n \"react/prefer-es6-class\": 0,\n \"react/jsx-filename-extension\": 0,\n \"react/prefer-stateless-function\": 0,\n \"object-curly-spacing\": 0,\n \"import/imports-first\": 0,\n \"import/no-unresolved\": 0,\n \"import/no-extraneous-dependencies\": 0,\n \"import/order\": 0,\n \"import/no-webpack-loader-syntax\": 0,\n }\n}\n"
},
{
"path": ".flowconfig",
"content": "[ignore]\n.*/node_modules/fbjs/lib/PromiseMap.js\n.*/node_modules/fbjs/lib/fetchWithRetries.js\n.*/node_modules/fbjs/lib/Deferred.js.flow\n.*/node_modules/fbjs/lib/equalsSet.js.flow\n.*/node_modules/fbjs/lib/shallowEqual.js.flow\n.*/node_modules/fbjs/lib/someSet.js.flow\n.*/node_modules/fbjs/lib/everySet.js.flow\n.*/node_modules/fbjs/lib/UnicodeBidi.js.flow\n.*/node_modules/fbjs/lib/UnicodeBidiService.js.flow\n.*/node_modules/kefir/kefir.js.flow\n.*/node_modules/kefir/dist/kefir.js.flow\n.*/test/.*\n.*/node_modules/@webassemblyjs/.*\n.*/node_modules/eslint-plugin-jsx-a11y/.*\n.*/node_modules/rollup-plugin-size-snapshot/.*\n.*/node_modules/babel-plugin-transform-react-remove-prop-types\n\n[include]\n\n[libs]\n\n[options]\n"
},
{
"path": ".gitignore",
"content": "logs\n*.log\n\npids\n*.pid\n*.seed\n\ncoverage\nnode_modules\nbower_components\n\n.DS_Store\n\n/demos/**/all.*\n/build/\n/lib/\n"
},
{
"path": ".npmignore",
"content": "/.*\n\n/bower_components/\n\n/coverage/\n/demos/\n/test/\n\n/karma.conf.js\n/webpack.*\n/server.js\n\n# sublime\n/*.sublime-project\n/*.sublime-workspace\n\n/rollup.config.js\n"
},
{
"path": ".size-snapshot.json",
"content": "{\n \"build/react-motion.js\": {\n \"bundled\": 77059,\n \"minified\": 22596,\n \"gzipped\": 6616\n },\n \"build/react-motion.min.js\": {\n \"bundled\": 52481,\n \"minified\": 15210,\n \"gzipped\": 4446\n },\n \"lib/react-motion.esm.js\": {\n \"bundled\": 43290,\n \"minified\": 14594,\n \"gzipped\": 3583,\n \"treeshaked\": {\n \"rollup\": {\n \"code\": 6381,\n \"import_statements\": 196\n },\n \"webpack\": {\n \"code\": 7588\n }\n }\n }\n}\n"
},
{
"path": ".travis.yml",
"content": "language: node_js\n\nnode_js:\n - 10\n\nscript:\n - npm run -s lint\n - npm run -s flow_check\n - npm run -s test:travis\n"
},
{
"path": "AUTHORS",
"content": "Adrian le Bas\nAmadeus Junqueira\nBenjamin San Souci\nBishop Zareh\nBrenton Simpson\nCesar Andreu\nCheng Lou\nDan Abramov\nDaniel Dunderfelt\nDustan Kasten\nFrederick Fogerty\nGaëtan Renaudeau\nGoogle, Inc.\nHenry Zhu\nIvan Starkov\nJeroen van Aert\nJesper Petersson\nJevgeni Geimanen\nJoe Lencioni\nJohn Amiah Ford\nJon Lebensold\nJustin Morris\nKyle Mathews\nLudovico Fischer\nMichael J Hoffman\nMirko Mariani\nNeil Kistner\nNik Butenko\nNikhil Baradwaj\nOlivier Tassinari\nPaolo Moretti\nRaymond Zhou\nRobert Haritonov\nSorin Iclanzan\nStefan Dombrowski\nStephen J. Collings\nSundeep Malladi\nSunil Pai\nTravis Arnold\nWilfred Denton\n"
},
{
"path": "HISTORY.md",
"content": "Legend:\n- [B]: Breaking\n- [F]: Fix\n- [I]: Improvement\n\n### 0.5.1 (August 28th 2017)\n- [F] New flow definitions, fixes children typing.\n\n### 0.5.0 (April 26th 2017)\n- [B] Dropping support for older React. Currently supported versions are `^0.14.9` || `^15.3.0`\n- [I] Upgraded all React components to use ES6 classes\n- [I] Replace React.PropTypes with prop-types package\n\n### 0.4.8 (April 17th 2017)\n\n- [I] Externalize stripStyle #452 by @bearcott\n- [I] Migrated deprecated React.PropTypes and React.createClass #446 by @Andarist\n- [F] Fix link to TypeScript types #443 by @pshrmn\n- [F] Refactored demo and fixed flow check errors #435 by @therewillbecode\n- [F] Fix broken link #430 by @codler\n- [F] Unmounted component setState fix #420 by @alleycat-at-git\n\n### 0.4.7 (December 15th 2016)\n- [I] `didLeave` for `TransitionMotion`! Please check the README for more.\n\n### 0.4.4 (June 4th 2016)\n- [F] Small fix to component unmounting bug (https://github.com/chenglou/react-motion/commit/49ea396041b0031b95f4941cc7efce200fcca454). It's not clear why this is erroring, but people want the temp fix.\n\n### 0.4.3 (April 19th 2016)\n- [F] `TransitionMotion` `styles` function not being passed `defaultStyles` value upon first call. #296\n- [I] `onRest` callback for `Motion`!\n\n### 0.4.2 (January 30th 2016)\n- [F] `TransitionMotion` keys merging bug. #264\n- [F] `TransitionMotion` rare stale read bug. [https://github.com/chenglou/react-motion/commit/f20dc1b9c8de7b387927b24afdb73e0a5ea0d0a6](https://github.com/chenglou/react-motion/commit/f20dc1b9c8de7b387927b24afdb73e0a5ea0d0a6)\n\n### 0.4.1 (January 26th 2016)\n- [F] Made a mistake while publishing the bower package; fixed.\n\n### 0.4.0 (January 26th 2016)\n- [B] `spring` helper's format has changed from `spring(10, [120, 12])` to `spring(10, {stiffness: 120, damping: 12})`.\n- [B] `style`, `styles` and `styles` of the three respective components now only accept either a number to interpolate, or a `spring` configuration to interpolate. Previously, it accepted (and ignored) random key/value pairs mixed in, such as `{x: spring(0), y: 'helloWorld'}`. `y` Doesn't belong there and should be placed elsewhere, e.g. directly on the (actual react) style of the component you're assigning the interpolating values on.\n- [B] `TransitionMotion` got an all-around clearer API. See the [upgrade guide](https://github.com/chenglou/react-motion/wiki) and [README section](https://github.com/chenglou/react-motion/blob/9877c311cc4a22099eb56fe7c76bad9753519ddb/README.md#transitionmotion-) for more.\n- [B] `Motion`'s' `defaultStyle`, informally accepted the format `{x: spring(0)}`. This is now officially unsupported. The correct format has always been `{x: 0}`. Setting a default style of `{x: spring(whatever)}` did not make sense; the configuration only applies for a `style`, aka destination value. Same modification applies to `StaggeredMotion` and `TransitionMotion`'s `defaultStyles` & `willEnter`.\n- [B] `TransitionMotion`'s `willEnter`/`willLeave`'s signature has changed.\n- [B] The `reorderKeys` helper is no longer needed thanks to the changes to `TransitionMotion`. It's now removed.\n- [B] React-Native specific build gone. RN 0.18+ uses the vanilla Npm React package, so there's no more need for us to export a wrapper.\n- [F] Bunch of bugs gone: #225, #212, #179, #157, #90, #88.\n- [I] `spring` has acquired a new field as part of the new signature: [precision tuning](https://github.com/chenglou/react-motion/blob/9877c311cc4a22099eb56fe7c76bad9753519ddb/README.md#--spring-val-number-config-springhelperconfig--opaqueconfig)!\n- [I] [Fully typed](https://github.com/chenglou/react-motion/blob/05d76f5ec7e9722dbca0237a97c41267e297eb2c/src/Types.js) via [Flow types](http://flowtype.org).\n- [I] Performance improvements.\n\n### 0.3.1 (October 14th 2015)\n- [F] Handle `null` and `undefined` in `style`/`styles`. #181\n- [I] Library's now partially annotated with [Flow](http://flowtype.org).\n- [I] Related to above, the `src/` folder is now exposed on npm so that you can take advantage of Flow by using: `import {Motion} from 'react-motion/src/react-motion'` directly, instead of the old, prebuilt `import {Motion} from 'react-motion'`. **This is experimental** and intentionally undocumented. You'll have to adjust your webpack/browserify configurations to require these original source files correctly. No harm trying of course. It's just some type annotations =).\n\n### 0.3.0 (September 30th 2015)\n- [B] API revamp! See [https://github.com/chenglou/react-motion/wiki](https://github.com/chenglou/react-motion/wiki) for more details. Thanks!\n\n### 0.2.7 (August 6th 2015)\n- [F] Small bug where nested springs don't animate. #123\n- [I] Support for all React 0.14.0 betas.\n\n### 0.2.6 (July 31th 2015)\n- [F] React-native warning's now gone, but also put into a separate file path. To require react-motion on react-native, do `require('react-motion/native')`.\n- [I] Support for React 0.14.0-beta1.\n\n### 0.2.4 (July 29th 2015)\n- [I] React-native support!\n- [I] Allow returning `null` from children function. #101\n- [I] `defaultValue` for specifying a... default value, upon mounting.\n- [I] `TransitionSpring`'s `willLeave` API got simplified and now asks for an object as a return value instead of `null`. `null` is still supported, but is deprecated and will be removed in the next version. See the new docs on it [here](https://github.com/chenglou/react-motion/blob/24d6a7284ef61268c0ead67fe43d7e40bf45d381/README.md#transitionspring-).\n- [I] Exposed a few tasteful default spring configurations under the new exported `presets`.\n\n### 0.2.2 (July 24th 2015)\n- [F] Import some internal modules correctly for Ubuntu/Linux node (case-sensitive for them).\n- [F] Nested springs work again.\n\n### 0.2.0 (July 22th 2015)\n- [B] `willLeave` returning `false` will now keep the key. Only `null` and `undefined` will serve as a signal to kill the disappeared key.\n- [B] `willLeave` previously failed to expose the second argument `correspondingValueOfKeyThatJustLeft`. It's now exposed correctly.\n- [F] Definitively fix the previous problem of mis-detecting React Element as object.\n- [F] `willLeave` is now called only once per disappearing key. It was called more than once previously as a implementation detail. Though you should never have put side-effects in `willLeave`. It's still discouraged now.\n- [F] If you have some `this.props.handlerThatSetStateAndUnmountsSpringInOwnerRender()` in `Spring`'s `endValue`, Spring's already scheduled `requestAnimationFrame` will no longer cause an extra `setState` since it's unmounted. But in general, _please_ don't put side-effect in `endValue`.\n- [I] Stabilize the spring algorithm. No more erratic behavior with a big amount of animated items or tab switching (which usually slows down `requestAnimationFrame`). #57\n- [I] Partial (total?) support for IE9 by using a `requestAnimationFrame` polyfill.\n\n### 0.1.0 (July 14th 2015)\n- [B] Breaking API: `TransitionSpring`'s `willEnter`'s callback signature is now `(keyThatEnters, correspondingValue, endValueYouJustSpecified, currentInterpolatedValue, currentSpeed)` (added `correspondingValue` as the second argument). Same for `willLeave`.\n- [B] `Spring` is now no longer exposed as a default, but simply as \"Spring\": `require('react-motion').Spring`. Or `import {Spring} from 'react-motion'`.\n- [B] `Spring` and `TransitionSpring`'s `children` function now expect a ReactElement. The components will no longer wrap the return value in a `div` for you. #44 #20\n- [I] Move React to from dependencies to peerDependencies. #35\n- [I] Internal cleanups + tests, for happier contributors.\n- [F] Mis-detecting React Element as object.\n- [F] Accidentally updating values at the first level of `endValue` without `{val: ...}` wrapper.\n\n### 0.0.3 (July 9th 2015)\n- [I] Initial release.\n"
},
{
"path": "LICENSE",
"content": "The MIT License (MIT)\n\nCopyright (c) 2015 React Motion authors\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\n"
},
{
"path": "README.md",
"content": "# React-Motion\n\n[](https://travis-ci.org/chenglou/react-motion)\n[](https://www.npmjs.com/package/react-motion)\n[](http://badge.fury.io/bo/react-motion)\n[](https://discordapp.com/invite/0ZcbPKXt5bYzmcI0)\n\n```js\nimport {Motion, spring} from 'react-motion';\n// In your render...\n\n {value =>
{value.x}
}\n\n```\n\nAnimate a counter from `0` to `10`. For more advanced usage, see below.\n\n### Install\n\n- Npm: `npm install --save react-motion`\n\n- Bower: **do not install with `bower install react-motion`, it won't work**. Use `bower install --save https://unpkg.com/react-motion/bower.zip`. Or in `bower.json`:\n```json\n{\n \"dependencies\": {\n \"react-motion\": \"https://unpkg.com/react-motion/bower.zip\"\n }\n}\n```\nthen include as\n```html\n\n```\n\n- 1998 Script Tag:\n```html\n\n(Module exposed as `ReactMotion`)\n```\n\n**Works with React-Native v0.18+**.\n\n### Demos\n- [Simple Transition](http://chenglou.github.io/react-motion/demos/demo0-simple-transition)\n- [Chat Heads](http://chenglou.github.io/react-motion/demos/demo1-chat-heads)\n- [Draggable Balls](http://chenglou.github.io/react-motion/demos/demo2-draggable-balls)\n- [TodoMVC List Transition](http://chenglou.github.io/react-motion/demos/demo3-todomvc-list-transition)\n- [Photo Gallery](http://chenglou.github.io/react-motion/demos/demo4-photo-gallery)\n- [Spring Parameters Chooser](http://chenglou.github.io/react-motion/demos/demo5-spring-parameters-chooser)\n- [Water Ripples](http://chenglou.github.io/react-motion/demos/demo7-water-ripples)\n- [Draggable List](http://chenglou.github.io/react-motion/demos/demo8-draggable-list)\n\n[Check the wiki for more!](https://github.com/chenglou/react-motion/wiki/Gallery-of-third-party-React-Motion-demos)\n\n### Try the Demos Locally\n```sh\ngit clone https://github.com/chenglou/react-motion.git\ncd react-motion\nnpm install\n```\n\n- With hot reloading (**slow, development version**): run `npm start`.\n- Without hot reloading (**faster, production version**): run `npm run build-demos` and open the static `demos/demo_name/index.html` file directly. **Don't forget to use production mode when testing your animation's performance**!\n\nTo build the repo yourself: `npm run prepublish`.\n\n## What does this library try to solve?\n\n[My React-Europe talk](https://www.youtube.com/watch?v=1tavDv5hXpo)\n\nFor 95% of use-cases of animating components, we don't have to resort to using hard-coded easing curves and duration. Set up a stiffness and damping for your UI element, and let the magic of physics take care of the rest. This way, you don't have to worry about petty situations such as interrupted animation behavior. It also greatly simplifies the API.\n\nThis library also provides an alternative, more powerful API for React's `TransitionGroup`.\n\n## API\n\nExports:\n- `spring`\n- `Motion`\n- `StaggeredMotion`\n- `TransitionMotion`\n- `presets`\n\n[Here](https://github.com/chenglou/react-motion/blob/9cb90eca20ecf56e77feb816d101a4a9110c7d70/src/Types.js)'s the well-annotated public [Flow type](http://flowtype.org) definition file (you don't have to use Flow with React-motion, but the types help document the API below).\n\nP.S. using TypeScript? [Here](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-motion/index.d.ts) are the React-motion TypeScript definitions!\n\n---\n\n### Helpers\n\n##### - spring: (val: number, config?: SpringHelperConfig) => OpaqueConfig\nUsed in conjunction with the components below. Specifies the how to animate to the destination value, e.g. `spring(10, {stiffness: 120, damping: 17})` means \"animate to value 10, with a spring of stiffness 120 and damping 17\".\n\n- `val`: the value.\n- `config`: optional, for further adjustments. Possible fields:\n - `stiffness`: optional, defaults to `170`.\n - `damping`: optional, defaults to `26`.\n - `precision`: optional, defaults to `0.01`. Specifies both the rounding of the interpolated value and the speed (internal).\n\n It's normal not to feel how stiffness and damping affect your spring; use [Spring Parameters Chooser](http://chenglou.github.io/react-motion/demos/demo5-spring-parameters-chooser) to get a feeling. **Usually**, you'd just use the list of tasteful stiffness/damping presets below.\n\n##### - Presets for `{stiffness, damping}`\nCommonly used spring configurations used like so: `spring(10, presets.wobbly)` or `spring(20, {...presets.gentle, precision: 0.1})`. [See here](https://github.com/chenglou/react-motion/blob/9cb90eca20ecf56e77feb816d101a4a9110c7d70/src/presets.js).\n\n---\n\n### <Motion />\n#### Usage\n```jsx\n\n {interpolatingStyle => }\n\n```\n\n#### Props\n\n##### - style: Style\n\nRequired. The `Style` type is an object that maps to either a `number` or an `OpaqueConfig` returned by `spring()` above. Must keep the same keys throughout component's existence. The meaning of the values:\n\n- an `OpaqueConfig` returned from `spring(x)`: interpolate to `x`.\n- a `number` `x`: jump to `x`, do not interpolate.\n\n##### - defaultStyle?: PlainStyle\nOptional. The `PlainStyle` type maps to `number`s. Defaults to an object with the same keys as `style` above, whose values are the initial numbers you're interpolating on. **Note that during subsequent renders, this prop is ignored. The values will interpolate from the current ones to the destination ones (specified by `style`)**.\n\n##### - children: (interpolatedStyle: PlainStyle) => ReactElement\nRequired **function**.\n\n- `interpolatedStyle`: the interpolated style object passed back to you. E.g. if you gave `style={{x: spring(10), y: spring(20)}}`, you'll receive as `interpolatedStyle`, at a certain time, `{x: 5.2, y: 12.1}`, which you can then apply on your `div` or something else.\n\n- Return: must return **one** React element to render.\n\n##### - onRest?: () => void\nOptional. The callback that fires when the animation comes to a rest.\n\n---\n\n### <StaggeredMotion />\nAnimates a collection of (**fixed length**) items whose values depend on each other, creating a natural, springy, \"staggering\" effect [like so](http://chenglou.github.io/react-motion/demos/demo1-chat-heads). This is preferred over hard-coding a delay for an array of `Motions` to achieve a similar (but less natural-looking) effect.\n\n#### Usage\n```jsx\n prevInterpolatedStyles.map((_, i) => {\n return i === 0\n ? {h: spring(100)}\n : {h: spring(prevInterpolatedStyles[i - 1].h)}\n })}>\n {interpolatingStyles =>\n
\n }\n\n```\n\nAka \"the current spring's destination value is the interpolating value of the previous spring\". Imagine a spring dragging another. Physics, it works!\n\n#### Props\n\n##### - styles: (previousInterpolatedStyles: ?Array<PlainStyle>) => Array<Style>\nRequired **function**. **Don't forget the \"s\"**!\n\n- `previousInterpolatedStyles`: the previously interpolating (array of) styles (`undefined` at first render, unless `defaultStyles` is provided).\n\n- Return: must return an array of `Style`s containing the destination values, e.g. `[{x: spring(10)}, {x: spring(20)}]`.\n\n##### - defaultStyles?: Array<PlainStyle>\nOptional. Similar to `Motion`'s `defaultStyle`, but an array of them.\n\n##### - children: (interpolatedStyles: Array<PlainStyle>) => ReactElement\nRequired **function**. Similar to `Motion`'s `children`, but accepts the array of interpolated styles instead, e.g. `[{x: 5}, {x: 6.4}, {x: 8.1}]`\n\n(No `onRest` for StaggeredMotion because we haven't found a good semantics for it yet. Voice your support in the issues section.)\n\n---\n\n### <TransitionMotion />\n**Helps you to do mounting and unmounting animation**.\n\n#### Usage\n\nYou have items `a`, `b`, `c`, with their respective style configuration, given to `TransitionMotion`'s `styles`. In its `children` function, you're passed the three interpolated styles as params; you map over them and produce three components. All is good.\n\nDuring next render, you give only `a` and `b`, indicating that you want `c` gone, but that you'd like to animate it reaching value `0`, before killing it for good.\n\nFortunately, `TransitionMotion` has kept `c` around and still passes it into the `children` function param. So when you're mapping over these three interpolated styles, you're still producing three components. It'll keep interpolating, while checking `c`'s current value at every frame. Once `c` reaches the specified `0`, `TransitionMotion` will remove it for good (from the interpolated styles passed to your `children` function).\n\nThis time, when mapping through the two remaining interpolated styles, you'll produce only two components. `c` is gone for real.\n\n```jsx\nimport createReactClass from 'create-react-class';\n\nconst Demo = createReactClass({\n getInitialState() {\n return {\n items: [{key: 'a', size: 10}, {key: 'b', size: 20}, {key: 'c', size: 30}],\n };\n },\n componentDidMount() {\n this.setState({\n items: [{key: 'a', size: 10}, {key: 'b', size: 20}], // remove c.\n });\n },\n willLeave() {\n // triggered when c's gone. Keeping c until its width/height reach 0.\n return {width: spring(0), height: spring(0)};\n },\n render() {\n return (\n ({\n key: item.key,\n style: {width: item.size, height: item.size},\n }))}>\n {interpolatedStyles =>\n // first render: a, b, c. Second: still a, b, c! Only last one's a, b.\n
\n }\n \n );\n },\n});\n```\n\n#### Props\n\nFirst, two type definitions to ease the comprehension.\n\n- `TransitionStyle`: an object of the format `{key: string, data?: any, style: Style}`.\n\n - `key`: required. The ID that `TransitionMotion` uses to track which configuration is which across renders, even when things are reordered. Typically reused as the component `key` when you map over the interpolated styles.\n\n - `data`: optional. Anything you'd like to carry along. This is so that when the previous section example's `c` disappears, you still get to access `c`'s related data, such as the text to display along with it.\n\n - `style`: required. The actual starting style configuration, similar to what you provide for `Motion`'s `style`. Maps keys to either a number or an `OpaqueConfig` returned by `spring()`.\n\n- `TransitionPlainStyle`: similar to above, except the `style` field's value is of type `PlainStyle`, aka an object that maps to numbers.\n\n##### - styles: Array<TransitionStyle> | (previousInterpolatedStyles: ?Array<TransitionPlainStyle>) => Array<TransitionStyle>\nRequired. Accepts either:\n\n - an array of `TransitionStyle` configs, e.g. `[{key: 'a', style: {x: spring(0)}}, {key: 'b', style: {x: spring(10)}}]`.\n\n - a function similar to `StaggeredMotion`, taking the previously interpolating styles (`undefined` at first call, unless `defaultStyles` is provided), and returning the previously mentioned array of configs. __You can do staggered mounting animation with this__.\n\n##### - defaultStyles?: Array<TransitionPlainStyle>\nOptional. Similar to the other components' `defaultStyle`/`defaultStyles`.\n\n##### - children: (interpolatedStyles: Array<TransitionPlainStyle>) => ReactElement\nRequired **function**. Similar to other two components' `children`. Receive back an array similar to what you provided for `defaultStyles`, only that each `style` object's number value represent the currently interpolating value.\n\n##### - willLeave?: (styleThatLeft: TransitionStyle) => ?Style\nOptional. Defaults to `() => null`. **The magic sauce property**.\n\n- `styleThatLeft`: the e.g. `{key: ..., data: ..., style: ...}` object from the `styles` array, identified by `key`, that was present during a previous render, and that is now absent, thus triggering the call to `willLeave`. Note that the style property is exactly what you passed in `styles`, and is not interpolated. For example, if you passed a spring for `x` you will receive an object like `{x: {stiffness, damping, val, precision}}`.\n\n- Return: `null` to indicate you want the `TransitionStyle` gone immediately. A `Style` object to indicate you want to reach transition to the specified value(s) before killing the `TransitionStyle`.\n\n##### - didLeave?: (styleThatLeft: `{key: string, data?: any}`) => void\nOptional. Defaults to `() => {}`.\n\n- `styleThatLeft`: the `{key:..., data:...}` that was removed after the finished transition.\n\n##### - willEnter?: (styleThatEntered: TransitionStyle) => PlainStyle\nOptional. Defaults to `styleThatEntered => stripStyle(styleThatEntered.style)`. Where `stripStyle` turns `{x: spring(10), y: spring(20)}` into `{x: 10, y: 20}`.\n\n- `styleThatEntered`: similar to `willLeave`'s, except the `TransitionStyle` represents the object whose `key` value was absent during the last `render`, and that is now present.\n\n- Return: a `defaultStyle`-like `PlainStyle` configuration, e.g. `{x: 0, y: 0}`, that serves as the starting values of the animation. Under this light, the default provided means \"a style config that has the same starting values as the destination values\".\n\n**Note** that `willEnter` and `defaultStyles` serve different purposes. `willEnter` only triggers when a previously inexistent `TransitionStyle` inside `styles` comes into the new render.\n\n(No `onRest` for TransitionMotion because we haven't found a good semantics for it yet. Voice your support in the issues section.)\n\n---\n\n## FAQ\n\n- How do I set the duration of my animation?\n\n[Hard-coded duration goes against fluid interfaces](https://twitter.com/andy_matuschak/status/566736015188963328). If your animation is interrupted mid-way, you'd get a weird completion animation if you hard-coded the time. That being said, in the demo section there's a great [Spring Parameters Chooser](http://chenglou.github.io/react-motion/demos/demo5-spring-parameters-chooser) for you to have a feel of what spring is appropriate, rather than guessing a duration in the dark.\n\n- How do I unmount the `TransitionMotion` container itself?\n\nYou don't. Unless you put it in another `TransitionMotion`...\n\n- How do I do staggering/chained animation where items animate in one after another?\n\nSee [`StaggeredMotion`](#staggeredmotion-)\n\n- My `ref` doesn't work in the children function.\n\nReact string refs won't work:\n\n```jsx\n{currentValue => }\n```\n\nThis is how React works. Here's the [callback ref solution](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs).\n"
},
{
"path": "bower.json",
"content": "{\n \"name\": \"react-motion\",\n \"version\": \"0.5.1\",\n \"homepage\": \"https://github.com/chenglou/react-motion\",\n \"authors\": [\n \"chenglou\"\n ],\n \"description\": \"A spring that solves your animation problems.\",\n \"main\": [\n \"build/react-motion.js\",\n \"build/react-motion.map\"\n ],\n \"dependencies\": {\n \"react\": \"^0.14.9 || ^15.3.0\"\n },\n \"keywords\": [\n \"react\",\n \"component\",\n \"react-component\",\n \"transitiongroup\",\n \"spring\",\n \"tween\",\n \"motion\",\n \"animation\",\n \"transition\",\n \"ui\"\n ],\n \"license\": \"MIT\",\n \"ignore\": [\n \"**/.*\",\n \"node_modules\",\n \"test\",\n \"demo*\",\n \"server.js\",\n \"src\",\n \"webpack.config.js\",\n \"webpack.prod.config.js\",\n \"karma.conf.js\",\n \"package.json\"\n ]\n}\n"
},
{
"path": "demos/README.md",
"content": "## Demos folder\n\n**Note**: since this is the master branch, the demos might be a bit ahead of the current stable API. [This commit](https://github.com/chenglou/react-motion/tree/0627243316c564f6c2f480bf615b82135f649a0a/demos) contains the stable demos.\n"
},
{
"path": "demos/demo0-simple-transition/Demo.jsx",
"content": "import React from 'react';\nimport {Motion, spring} from '../../src/react-motion';\n\nexport default class Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {open: false};\n };\n\n handleMouseDown = () => {\n this.setState({open: !this.state.open});\n };\n\n handleTouchStart = (e) => {\n e.preventDefault();\n this.handleMouseDown();\n };\n\n render() {\n return (\n
\n \n Toggle\n \n\n \n {({x}) =>\n // children is a callback which should accept the current value of\n // `style`\n
\n \n
\n }\n \n
\n );\n };\n}\n"
},
{
"path": "demos/demo0-simple-transition/index.html",
"content": "\n\n\n\n \n Toggle\n \n\n\n\n\n\n\n\n\n\n"
},
{
"path": "demos/demo0-simple-transition/index.jsx",
"content": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Demo from './Demo';\n\nReactDOM.render(, document.querySelector('#content'));\n"
},
{
"path": "demos/demo1-chat-heads/Demo.jsx",
"content": "import React from 'react';\nimport {StaggeredMotion, spring, presets} from '../../src/react-motion';\nimport range from 'lodash.range';\n\nexport default class Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {x: 250, y: 300};\n };\n\n componentDidMount() {\n window.addEventListener('mousemove', this.handleMouseMove);\n window.addEventListener('touchmove', this.handleTouchMove);\n };\n\n handleMouseMove = ({pageX: x, pageY: y}) => {\n this.setState({x, y});\n };\n\n handleTouchMove = ({touches}) => {\n this.handleMouseMove(touches[0]);\n };\n\n getStyles = (prevStyles) => {\n // `prevStyles` is the interpolated value of the last tick\n const endValue = prevStyles.map((_, i) => {\n return i === 0\n ? this.state\n : {\n x: spring(prevStyles[i - 1].x, presets.gentle),\n y: spring(prevStyles[i - 1].y, presets.gentle),\n };\n });\n return endValue;\n };\n\n render() {\n return (\n ({x: 0, y: 0}))}\n styles={this.getStyles}>\n {balls =>\n
\n }\n