{"_id":"r-animation","_rev":"14-c46fcec7e6e1095fbbc657c611876941","name":"r-animation","description":"Animations for your react components!","dist-tags":{"latest":"0.5.1"},"versions":{"0.3.6":{"name":"r-animation","version":"0.3.6","author":{"name":"Florian Zinggeler"},"description":"Animations for your react components!","main":"./src/index.jsx","keywords":["react","react-component","react animation","animation","tween","ease"],"bugs":{"url":"https://github.com/Zinggi/RAnimation/issues/"},"homepage":"https://github.com/Zinggi/RAnimation","repository":{"type":"git","url":"https://github.com/Zinggi/RAnimation"},"peerDependencies":{"react":"0.12.x"},"devDependencies":{"react":"^0.12.1","grunt":"^0.4.5","grunt-cli":"^0.1.13","grunt-contrib-watch":"^0.6.1","grunt-react":"^0.10.0","grunt-webpack":"^1.0.8","jsx-loader":"^0.12.2","webpack":"^1.4.13","webpack-dev-server":"^1.6.6"},"license":"MIT","gitHead":"1cabb5dceb701c4f50f528597f1a94f85ad0bbaa","_id":"r-animation@0.3.6","scripts":{},"_shasum":"de59fed7b79a8f0df31714bc12b12f50f78fed1d","_from":".","_npmVersion":"1.4.28","_npmUser":{"name":"zinggi","email":"florian.zinggeler@gmail.com"},"maintainers":[{"name":"zinggi","email":"florian.zinggeler@gmail.com"}],"dist":{"shasum":"de59fed7b79a8f0df31714bc12b12f50f78fed1d","tarball":"https://registry.npmjs.org/r-animation/-/r-animation-0.3.6.tgz","integrity":"sha512-6mf354RJPl+i74RSgBh3F1qQCBhk9Ag5bgMm39sAEylAwF4vyb3tgZ9sQAGQAZKyDCfAB+7jbFuWv6+xfYWTYg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDk+bXwWdL2O29gA6a3MPWIjidXuXFDtcUS9BsmLGnt7wIgbEPPZfPC+bm6rc4fAnz037hLohAYYX9pvqjPSYlEXoE="}]}},"0.3.7":{"name":"r-animation","version":"0.3.7","author":{"name":"Florian Zinggeler"},"description":"Animations for your react components!","main":"./src/index.jsx","keywords":["react","react-component","react animation","animation","tween","ease"],"bugs":{"url":"https://github.com/Zinggi/RAnimation/issues/"},"homepage":"https://github.com/Zinggi/RAnimation","repository":{"type":"git","url":"https://github.com/Zinggi/RAnimation"},"peerDependencies":{"react":"0.12.x"},"devDependencies":{"react":"^0.12.1","grunt":"^0.4.5","grunt-cli":"^0.1.13","grunt-contrib-watch":"^0.6.1","grunt-react":"^0.10.0","grunt-webpack":"^1.0.8","jsx-loader":"^0.12.2","webpack":"^1.4.13","webpack-dev-server":"^1.6.6"},"license":"MIT","gitHead":"21354a54d2d2ee71c0909dd127b7bd0f6e1227e0","_id":"r-animation@0.3.7","scripts":{},"_shasum":"736ba92de44149407361189566b7dee50ecbdc06","_from":".","_npmVersion":"1.4.28","_npmUser":{"name":"zinggi","email":"florian.zinggeler@gmail.com"},"maintainers":[{"name":"zinggi","email":"florian.zinggeler@gmail.com"}],"dist":{"shasum":"736ba92de44149407361189566b7dee50ecbdc06","tarball":"https://registry.npmjs.org/r-animation/-/r-animation-0.3.7.tgz","integrity":"sha512-3IX+LMLr29adgsSZc2iQC+NuEZmJvYyhuM6JUcADxfTGI40Nna4RpmSfSaS9SHmkHySw3YIkbAKLoZoQls55cw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhOkiy6GH6gLDpXUpmd7/GaDwt/76JPrEXPJOs0nW4mAIgB0UU+VTNrGqttLGLGVmuzFOKL8gkQLOjuUufYl+94/Y="}]}},"0.3.8":{"name":"r-animation","version":"0.3.8","author":{"name":"Florian Zinggeler"},"description":"Animations for your react components!","main":"./src/index.jsx","keywords":["react","react-component","react animation","animation","tween","ease"],"bugs":{"url":"https://github.com/Zinggi/RAnimation/issues/"},"homepage":"https://github.com/Zinggi/RAnimation","repository":{"type":"git","url":"https://github.com/Zinggi/RAnimation"},"peerDependencies":{"react":"0.12.x"},"devDependencies":{"react":"^0.12.1","grunt":"^0.4.5","grunt-cli":"^0.1.13","grunt-contrib-watch":"^0.6.1","grunt-react":"^0.10.0","grunt-webpack":"^1.0.8","jsx-loader":"^0.12.2","webpack":"^1.4.13","webpack-dev-server":"^1.6.6"},"license":"MIT","gitHead":"1fb9585a483fbc18f4dee1a6faf4d8ed98ada7d8","_id":"r-animation@0.3.8","scripts":{},"_shasum":"a63573115c488adfc50c989b48912a725e820ba2","_from":".","_npmVersion":"1.4.28","_npmUser":{"name":"zinggi","email":"florian.zinggeler@gmail.com"},"maintainers":[{"name":"zinggi","email":"florian.zinggeler@gmail.com"}],"dist":{"shasum":"a63573115c488adfc50c989b48912a725e820ba2","tarball":"https://registry.npmjs.org/r-animation/-/r-animation-0.3.8.tgz","integrity":"sha512-d0ktu817ei26s/sjoVc0poDvapzTih60Fl8NWEzswIVjR8WU/GXMsr2Lt0pS+u7OL1amStxH63PunvcDMIog5Q==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDY1o3HNVRgvijKgOkbvSnVk7SLaiPW9NPOb+cNRI2ZVAIhAJ/rfCdx+JUONTYncqjQuFo2A+dak9N8MQRFOmpF2CNO"}]}},"0.4.0":{"name":"r-animation","version":"0.4.0","author":{"name":"Florian Zinggeler"},"description":"Animations for your react components!","main":"./src/index.jsx","keywords":["react","react-component","react animation","animation","tween","ease"],"bugs":{"url":"https://github.com/Zinggi/RAnimation/issues/"},"homepage":"https://github.com/Zinggi/RAnimation","repository":{"type":"git","url":"https://github.com/Zinggi/RAnimation"},"peerDependencies":{"react":"0.12.x"},"devDependencies":{"react":"^0.12.1","grunt":"^0.4.5","grunt-cli":"^0.1.13","grunt-contrib-watch":"^0.6.1","grunt-react":"^0.10.0","grunt-webpack":"^1.0.8","jsx-loader":"^0.12.2","webpack":"^1.4.13","webpack-dev-server":"^1.6.6"},"license":"MIT","gitHead":"ddfa01c00de97bcf9723c0ce9c7f8553b99ccc65","_id":"r-animation@0.4.0","scripts":{},"_shasum":"e105b8fdeaa30918cf6a1115dbd981ff3a87026b","_from":".","_npmVersion":"1.4.28","_npmUser":{"name":"zinggi","email":"florian.zinggeler@gmail.com"},"maintainers":[{"name":"zinggi","email":"florian.zinggeler@gmail.com"}],"dist":{"shasum":"e105b8fdeaa30918cf6a1115dbd981ff3a87026b","tarball":"https://registry.npmjs.org/r-animation/-/r-animation-0.4.0.tgz","integrity":"sha512-mqsaDcUM+e7e/izTZy5dXEStQuMCqFHZNTrKgOEe3QsJ3DuCi786dYp3eTnwvHaRm429Ef9tiRaTzjN9dzkQog==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGmw3rj5SvBm3nbjQMT0oA7m7FH2+Z3qx40I0W74GMihAiEA2ENq3Xls3L9I047tlU7JxY81C/VundDKKZTOb858lLg="}]}},"0.5.0":{"name":"r-animation","version":"0.5.0","author":{"name":"Florian Zinggeler"},"description":"Animations for your react components!","main":"./src/index.jsx","keywords":["react","react-component","react animation","animation","tween","ease"],"bugs":{"url":"https://github.com/Zinggi/RAnimation/issues/"},"homepage":"https://github.com/Zinggi/RAnimation","repository":{"type":"git","url":"git+https://github.com/Zinggi/RAnimation.git"},"peerDependencies":{},"devDependencies":{"react":"^0.13.3","grunt":"^0.4.5","grunt-cli":"^0.1.13","grunt-contrib-watch":"^0.6.1","grunt-react":"^0.10.0","grunt-webpack":"^1.0.8","jsx-loader":"^0.12.2","webpack":"^1.4.13","webpack-dev-server":"^1.6.6"},"license":"MIT","gitHead":"3fe5c790b6ed23b120cfb5c1230051855f0746b7","_id":"r-animation@0.5.0","scripts":{},"_shasum":"0adc356fea0bcb0e0e7c20ddad1928a972a577a0","_from":".","_npmVersion":"2.11.3","_nodeVersion":"0.12.7","_npmUser":{"name":"zinggi","email":"florian.zinggeler@gmail.com"},"dist":{"shasum":"0adc356fea0bcb0e0e7c20ddad1928a972a577a0","tarball":"https://registry.npmjs.org/r-animation/-/r-animation-0.5.0.tgz","integrity":"sha512-re2yY7KaY8eiovMObNt/ZzeI+6FpWnfepK2TVMLTR8IXotdJaB4lLyRRLbSzyGOHxnd8IrjTv/3v9JgK2VsD4A==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGBcaI5hay/RLn5eixyBKplclUgpyGu6g/+B4QGS8hxCAiEAjLnyekoUuOlocVqurakBPNtws7xwTYQ4I8dhB4FIFH4="}]},"maintainers":[{"name":"zinggi","email":"florian.zinggeler@gmail.com"}]},"0.5.1":{"name":"r-animation","version":"0.5.1","author":{"name":"Florian Zinggeler"},"description":"Animations for your react components!","main":"./src/index.js","keywords":["react","react-component","react animation","animation","tween","ease"],"bugs":{"url":"https://github.com/Zinggi/RAnimation/issues/"},"homepage":"https://github.com/Zinggi/RAnimation","repository":{"type":"git","url":"git+https://github.com/Zinggi/RAnimation.git"},"peerDependencies":{},"devDependencies":{"react":"^0.13.3","grunt":"^0.4.5","grunt-cli":"^0.1.13","grunt-contrib-watch":"^0.6.1","grunt-react":"^0.10.0","grunt-webpack":"^1.0.8","jsx-loader":"^0.12.2","webpack":"^1.4.13","webpack-dev-server":"^1.6.6"},"license":"MIT","gitHead":"d7a9bd0684251ef353f156e5c720dfdfffc32d34","_id":"r-animation@0.5.1","scripts":{},"_shasum":"6b03e97320b3d148275a959ff2a0645320395f85","_from":".","_npmVersion":"2.11.3","_nodeVersion":"0.12.7","_npmUser":{"name":"zinggi","email":"florian.zinggeler@gmail.com"},"dist":{"shasum":"6b03e97320b3d148275a959ff2a0645320395f85","tarball":"https://registry.npmjs.org/r-animation/-/r-animation-0.5.1.tgz","integrity":"sha512-orx0U7ZY+NS43ZUlSnehW2HIQhOYjtvCfG4D4RecBfqnhcfuT2T+8fc8WVzNSj2rtV0vatMEr3vhusIW2hbjhw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDBu79cYqVZ2Y//y4vV5twT73hoYdZkgSHRkbtN5mvkRAiA5sKZXOb0+DYrOFkBDi+7ftEy8jq4HO5e7rLNQm86CcQ=="}]},"maintainers":[{"name":"zinggi","email":"florian.zinggeler@gmail.com"}]}},"readme":"# RAnimation\r\n\r\nAn animation library made for React.\r\n\r\n## Demo\r\n\r\n[Demo Animations](https://rawgit.com/Zinggi/RAnimation/master/DemoExample.html) / [Src](examples/DemoExample.jsx)  \r\n[Demo UserInput](https://rawgit.com/Zinggi/RAnimation/master/UserInput.html) / [Src](examples/UserInput.jsx)  \r\n\r\nCheck out all the [examples](examples)!\r\n\r\n## Install\r\n\r\n```sh\r\nnpm install r-animation --save\r\n```\r\n\r\n## Motivation\r\n\r\nWhile trying to recreate a currently native Android and IPhone app as a hybrid app (using React),\r\nI came to the point where everything was unacceptably slow.\r\nReact's diffing algorithm might be fast enough for many \"normal\" things, but it's definitely too slow for doing animations (especially on mobile).\r\n\r\nAnother thing that bothered me, was that suddenly I had to put things in my state that didn't really belong there, as they were not truly describing the application's state, but solely some intermediate state, only needed for animation. This would mean that I could no longer easily serialize the applications state as it was cluttered with unnecessary state descriptions\r\n\r\n## Features\r\n\r\n**Performance**: Animations need to look smooth which is especially hard to achieve on mobile devices.  \r\nTo make animations as smooth as possible, all animations are offloaded into a single requestAnimationFrame.  \r\nEven when doing animations based on user input, say in onTouchMove, the updates will not happen immediately, but only every time a frame gets rendered!\r\n\r\n**Interruptible animations**: Animations should be interruptible, to stay fully interactive.  \r\nWhen an animation is interrupted we have to be careful to keep the current velocity to get a smooth transition between two animations.  \r\nThis library always keeps track of the velocity for you and automatically passes this information on to the next animation.\r\n\r\n**Physically based animations**: Physics gives us all we need for naturally looking movements, a mass–spring–damper system is a pure goldmine!\r\n\r\n\r\n****\r\n\r\n## Concepts\r\n\r\n### Static animations\r\n\r\nThese can be useful when you need exact control over an animation, e.g. you want to know from where to where, how long and exactly how it will move.  \r\n[Robert Penner's Easing Functions](http://www.robertpenner.com/easing/) have almost become standard for these kind of animations, so a slightly modified version of them is included in this library.  \r\n\r\nFor maximum control, but achieved by ignoring the previous velocity,  \r\n * Use [easeTo](src/animation/animationMixin.js#L385-L434),  \r\n\t* Configure with [Easing.*](src/animation/easing.js#L62).\r\n\r\nWhen you want to keep as much control as possible, while maintaining the previous velocity, you need to fade one animation into the other.  \r\n\r\n * Use [easeTo](src/animation/animationMixin.js#L385-L434) with a fade object.  \r\n\t* Configure with [Easing.*](src/animation/easing.js#L62).\r\n\r\n### Physical animations\r\n\r\nIf you want physically accurate animations, you will have to give up a little bit of control over the animation.  \r\nThis means you don't know any more how long an animation will take, but as a plus, the animation will be way more realistic.  \r\n\r\nIf you want an animation from point a to b, given some physical model describing the motion,  \r\n * Use [simulateToHalt](src/animation/animationMixin.js#L233-L284),  \r\n    * Configure with [Model.controlled.*](src/animation/model.js#L107).\r\n\r\nIf you don't need to know where the animation ends, e.g. for a scrolling list,  \r\n * Use [simulateToHalt](src/animation/animationMixin.js#L233-L284),  \r\n\t* Configure with [Model.uncontrolled.*](src/animation/model.js#L132).\r\n\r\n### User input\r\n\r\nUse [userInput](src/animation/animationMixin.js#L320-L339) to give the user control over an animation.\r\nBefore you call that, you need to configure how the animation should react on this input with the fallowing functions:  \r\n\r\nIf you want to give a user direct control over the motion of an object,\r\n * Use [startDirectUserInput](src/animation/animationMixin.js#L345-L360)\r\n\r\nIf you want to respect physical properties of an object the user is controlling, e.g. something that should feel heavy,  \r\n * Use [startIndirectUserInput](src/animation/animationMixin.js#L367-L381)\r\n \t* Configure with [Model.controlled.*](src/animation/model.js#L107).\r\n\r\n### Decoration / Additive animation\r\n**This is currently in progress and not implemented yet!**  \r\nAdding an animation on top of another could be useful, as described [here](http://ronnqvi.st/multiple-animations/).\r\nGiven that this library already does smooth interruptions of ongoing animation, the only use of this would be to add some complexity to animations, as in the heart example of the linked article.\r\nHowever, this can be achieved differently. The heart animation has a one degree of freedom, therefore it's enough to animate a single value. This value then has to be mapped to the desired path.\r\n\r\n### Animation state\r\nThe state of your animation doesn't describe you application state, therefore it will not be stored inside your state object.\r\nInstead you can access it any time with `this.animationState`.  \r\nYou can manipulate it with the above functions.\r\nThe initial animation state needs to be specified inside your `getInitialAnimationState` function!\r\n\r\n### Perform animation\r\nSince we are avoiding Reacts diffing algorithm for performance reasons, we sadly can't completely describe our UI in our render method.  \r\nInstead, `performAnimation` will be called every time a new frame is rendered, so that you can then imperatively modify the DOM to display your current `animationState`. This is not ideal, I would prefer a declarative way like the render method, but it seems to be necessary for good performance.\r\n\r\n### Performance tips\r\nAvoid the diffing algorithm while performing an animation at all cost!   \r\nIt leads to unacceptable stutter on mobile devices.\r\nA technique to avoid the algorithm is to avoid calling `setState` during an ongoing animation. If you still want to maintain some state information, a very controversial but efficient way to do this is by directly modifying `this.state`. Yes, crazy, I know!\r\n\r\n\r\n## API\r\n\r\nRequire the needed modules (only pick the ones you need):\r\n```JS\r\nvar {animationMixin, Easing, Model} = require('r-animation');\r\n```\r\n\r\n### Simple examples\r\nCheck out:  \r\n[simple animation](https://rawgit.com/Zinggi/RAnimation/master/SimpleDemo.html) / [src](examples/SimpleDemo.jsx)  \r\n[simple user input](https://rawgit.com/Zinggi/RAnimation/master/SimpleUserInput.html) / [src](examples/SimpleUserInput.jsx)\r\n\r\n#### animationMixin\r\nThis mixin powers the whole animation system.  \r\nYou need to implement:\r\n * getInitialAnimationState\r\n * performAnimation\r\n\r\nIt provides:  \r\n * easeTo\r\n * simulateToHalt\r\n * startDirectUserInput\r\n * startIndirectUserInput\r\n * userInput\r\n * cancelAnimation\r\n * getAnimation\r\n * startAnimation\r\n\r\n[doc](src/animation/animationMixin.js)\r\n\r\n#### Easing\r\nA collection of easing functions.\r\n\r\n[doc](src/animation/easing.js)\r\n\r\n#### Model\r\nA collection of physical models.\r\n\r\n[doc](src/animation/model.js)\r\n\r\n---\r\n## Develop\r\n\r\nFirst time, run:  \r\n`npm install`  \r\nAfter that, Just run:  \r\n`grunt dev`\r\n\r\n---\r\n## Also try this\r\n[r-layout](https://github.com/Zinggi/RLayout) - Layout made simple. Screw CSS!\r\n\r\n---\r\n## License\r\n\r\n[MIT](LICENSE)\r\n","maintainers":[{"name":"zinggi","email":"florian.zinggeler@gmail.com"}],"time":{"modified":"2022-06-25T08:31:58.894Z","created":"2015-01-21T09:40:30.683Z","0.3.6":"2015-01-21T09:40:30.683Z","0.3.7":"2015-02-17T08:11:39.726Z","0.3.8":"2015-02-17T08:22:52.628Z","0.4.0":"2015-02-18T13:31:50.965Z","0.5.0":"2015-07-31T12:49:04.954Z","0.5.1":"2015-08-03T14:24:42.540Z"},"homepage":"https://github.com/Zinggi/RAnimation","keywords":["react","react-component","react animation","animation","tween","ease"],"repository":{"type":"git","url":"git+https://github.com/Zinggi/RAnimation.git"},"author":{"name":"Florian Zinggeler"},"bugs":{"url":"https://github.com/Zinggi/RAnimation/issues/"},"license":"MIT","readmeFilename":"README.md","users":{"theveil":true,"robertpenner":true}}