{"_id":"react-animations","_rev":"84-7b555e131ba618df7d93a00d382dd45e","name":"react-animations","dist-tags":{"beta":"0.0.1","latest":"1.0.0"},"versions":{"0.0.1":{"name":"react-animations","version":"0.0.1","keywords":["react","animation","radium","css-in-js"],"author":{"name":"Brandon Dail","email":"brandon.dail@formidable.com"},"license":"MIT","_id":"react-animations@0.0.1","maintainers":[{"name":"aweary","email":"Kierkegaurd@gmail.com"}],"dist":{"shasum":"ca7ea1c2eb4fb0f0a294d978790334861271e0d5","tarball":"https://registry.npmjs.org/react-animations/-/react-animations-0.0.1.tgz","integrity":"sha512-RUkuO0Y8CVWAVx4ls6QhirQJX+sYwJlvLdhvpIJOWDAJi1jCxNogmsmkHQkzAJeUj6eD3tLFYgID8WAVPfmrgQ==","signatures":[{"sig":"MEUCIDwnmvsnxlgKBT+dT97FVWVQtH19mm/Zvg9Mp9ACNd7wAiEAkzwRFCwWUSE8ujnyPoo7JVA8EeABqrJlde2GXd1bHWY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"ca7ea1c2eb4fb0f0a294d978790334861271e0d5","gitHead":"d966a7e0ef02234c439ead68679b00939ef24cf6","scripts":{"demo":"npm run build && builder run hot","flow":"flow","test":"jest","build":"builder run build","prepublish":"npm run build"},"_npmUser":{"name":"aweary","email":"Kierkegaurd@gmail.com"},"_npmVersion":"3.10.3","description":"A collection of animations for inline styles","directories":{},"_nodeVersion":"6.5.0","dependencies":{"builder-radium-component":"^2.1.2","builder-victory-component":"^2.5.0"},"devDependencies":{"radium":"^0.18.1","builder":"^3.0.0","flow-bin":"^0.32.0","aphrodite":"^0.5.0","builder-radium-component-dev":"^2.1.2"},"_npmOperationalInternal":{"tmp":"tmp/react-animations-0.0.1.tgz_1474677351820_0.47347933193668723","host":"packages-12-west.internal.npmjs.com"}},"0.0.2":{"name":"react-animations","version":"0.0.2","keywords":["react","animation","radium","css-in-js"],"author":{"name":"Brandon Dail","email":"brandon.dail@formidable.com"},"license":"MIT","_id":"react-animations@0.0.2","maintainers":[{"name":"aweary","email":"Kierkegaurd@gmail.com"}],"dist":{"shasum":"5ab4679ac8240368a73c83872f918bc0ca29e78d","tarball":"https://registry.npmjs.org/react-animations/-/react-animations-0.0.2.tgz","integrity":"sha512-SZLuKOhLl1895OKhcOUsIDprkUdNGYFHi/p9hYhxmy2eCsooDacvNa9TIwwAq0XvIx9uExLDsCiRkA7p0uIwNQ==","signatures":[{"sig":"MEYCIQClFBgS1XKGB2l9QDJr+5+mPmY66hfcPl/+PnzNvDpuKAIhAN19FXiWqcXgsswv0qAsMO08wsz8b61PcqRnNF51Xo2L","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","_from":".","_shasum":"5ab4679ac8240368a73c83872f918bc0ca29e78d","gitHead":"d78e2debe955c6eec253608f0390e18a66dd8e51","scripts":{"demo":"node demo/server","dist":"npm run clean-dist && npm run build-dist && npm run build-dist-min","flow":"flow","lint":"eslint src","test":"npm run flow && npm run lint && npm run test:only","build":"babel src -d lib --ignore **/*.spec.js","test:only":"jest","build-dist":"webpack","clean-dist":"rimraf dist && mkdir dist","prepublish":"npm run test && npm run build && npm run dist","build-dist-min":"NODE_ENV=production webpack"},"_npmUser":{"name":"aweary","email":"Kierkegaurd@gmail.com"},"_npmVersion":"3.10.3","description":"A collection of animations for inline styles","directories":{},"_nodeVersion":"6.5.0","devDependencies":{"jest":"^15.1.1","react":"^15.3.2","eslint":"^3.6.0","radium":"^0.18.1","rimraf":"^2.5.4","webpack":"^2.1.0-beta.25","flow-bin":"^0.32.0","jest-cli":"^15.1.1","aphrodite":"^0.5.0","babel-cli":"^6.14.0","react-dom":"^15.3.2","babel-jest":"^15.0.0","babel-eslint":"^6.1.2","babel-loader":"^6.2.5","babel-polyfill":"^6.13.0","babel-preset-react":"^6.11.1","webpack-dev-server":"^1.16.1","babel-preset-es2015":"^6.14.0","eslint-plugin-flowtype":"^2.19.0","babel-plugin-transform-export-extensions":"^6.8.0","babel-plugin-transform-object-rest-spread":"^6.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-animations-0.0.2.tgz_1474855840290_0.7526953837368637","host":"packages-12-west.internal.npmjs.com"}},"0.1.0":{"name":"react-animations","version":"0.1.0","keywords":["react","animation","radium","css-in-js"],"author":{"name":"Brandon Dail","email":"brandon.dail@formidable.com"},"license":"MIT","_id":"react-animations@0.1.0","maintainers":[{"name":"aweary","email":"Kierkegaurd@gmail.com"}],"dist":{"shasum":"519b6f4fe0f90b49fbfd4fcd73d978c5087130b1","tarball":"https://registry.npmjs.org/react-animations/-/react-animations-0.1.0.tgz","integrity":"sha512-Eyj3ZRfM1WQlMrI7xDlFm9nWJ9R8J0GK3lVaCW9AYmLbU2c1AlzZNrxcvdyJ5c+n1IWR2TCA+H4ZzmG+AGAV1A==","signatures":[{"sig":"MEUCIDUyuAITfKH2yVv19AXuvcZ0AE+bzCQ3UJyH3CrNMOPrAiEA4V8HiSsTBfeup6tbgLVOmSAaWO0eazDAOmMeOJm5+oU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","_from":".","_shasum":"519b6f4fe0f90b49fbfd4fcd73d978c5087130b1","gitHead":"a8e9608dcee845b812fa19cd47f29cecabf7875a","scripts":{"demo":"node demo/server","dist":"npm run clean-dist && npm run build-dist && npm run build-dist-min","flow":"flow","lint":"eslint src","test":"npm run flow && npm run lint && npm run test:only","build":"babel src -d lib --ignore **/*.spec.js","test:only":"jest","build-dist":"webpack","clean-dist":"rimraf dist && mkdir dist","prepublish":"npm run test && npm run build && npm run dist","build-dist-min":"NODE_ENV=production webpack"},"_npmUser":{"name":"aweary","email":"Kierkegaurd@gmail.com"},"_npmVersion":"3.10.3","description":"A collection of animations for inline styles","directories":{},"_nodeVersion":"6.5.0","devDependencies":{"jest":"^15.1.1","react":"^15.3.2","eslint":"^3.6.0","radium":"^0.18.1","rimraf":"^2.5.4","webpack":"^2.1.0-beta.25","flow-bin":"^0.32.0","jest-cli":"^15.1.1","aphrodite":"^0.5.0","babel-cli":"^6.14.0","react-dom":"^15.3.2","babel-jest":"^15.0.0","babel-eslint":"^6.1.2","babel-loader":"^6.2.5","babel-polyfill":"^6.13.0","babel-preset-react":"^6.11.1","webpack-dev-server":"^1.16.1","babel-preset-es2015":"^6.14.0","eslint-plugin-flowtype":"^2.19.0","babel-plugin-transform-export-extensions":"^6.8.0","babel-plugin-transform-object-rest-spread":"^6.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-animations-0.1.0.tgz_1474857595554_0.9427434867247939","host":"packages-12-west.internal.npmjs.com"}},"1.0.0":{"name":"react-animations","version":"1.0.0","keywords":["react","animation","radium","css-in-js"],"author":{"name":"Brandon Dail","email":"brandon.dail@formidable.com"},"license":"MIT","_id":"react-animations@1.0.0","maintainers":[{"name":"aweary","email":"Kierkegaurd@gmail.com"}],"dist":{"shasum":"d96222920dfeabec8984d9b2ef2c5a5aadb40f06","tarball":"https://registry.npmjs.org/react-animations/-/react-animations-1.0.0.tgz","integrity":"sha512-ePPpVgdKnNEXm+LP1ww5s3n0JzebBw9QdRfxRqogzeg1PDIn6kf0pmvgeTeVZQXXpGmHImkIeTiaQR1O6xjntA==","signatures":[{"sig":"MEQCIBzf/tS8q/k4nWONSp5sZBSPrjJ+gbHU6jadEyPCkAOiAiBu5mo1XaLtH+rnRpnW2Zh485azCLREZKgJWuS3YbCjXA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","gitHead":"4f8ca379f246c8fd1da613b3c19e68e52211198a","scripts":{"demo":"node demo/server","dist":"npm run clean-dist && npm run build-dist && npm run build-dist-min","flow":"flow","lint":"eslint src","test":"npm run flow && npm run lint && npm run test:only","build":"babel src -d lib --ignore **/*.spec.js","test:only":"jest","build-dist":"webpack","clean-dist":"rimraf dist && mkdir dist","prepublish":"npm run test && npm run build && npm run dist","build-dist-min":"NODE_ENV=production webpack"},"_npmUser":{"name":"aweary","email":"Kierkegaurd@gmail.com"},"_npmVersion":"5.4.2","description":"A collection of animations for inline styles","directories":{},"_nodeVersion":"8.4.0","devDependencies":{"jest":"^15.1.1","react":"^15.3.2","eslint":"^3.6.0","radium":"^0.18.1","rimraf":"^2.5.4","webpack":"^2.1.0-beta.25","flow-bin":"^0.32.0","jest-cli":"^15.1.1","aphrodite":"^0.5.0","babel-cli":"^6.14.0","react-dom":"^15.3.2","babel-jest":"^15.0.0","babel-eslint":"^6.1.2","babel-loader":"^6.2.5","babel-polyfill":"^6.13.0","babel-preset-react":"^6.11.1","webpack-dev-server":"^1.16.1","babel-preset-es2015":"^6.14.0","eslint-plugin-import":"^1.16.0","eslint-plugin-flowtype":"^2.19.0","eslint-plugin-filenames":"^1.1.0","eslint-config-formidable":"^2.0.1","babel-plugin-transform-export-extensions":"^6.8.0","babel-plugin-transform-object-rest-spread":"^6.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-animations-1.0.0.tgz_1509411014805_0.5177057632245123","host":"s3://npm-registry-packages"}}},"time":{"created":"2016-09-24T00:35:53.820Z","modified":"2026-07-20T21:09:25.475Z","0.0.1":"2016-09-24T00:35:53.820Z","0.0.2":"2016-09-26T02:10:42.443Z","0.1.0":"2016-09-26T02:39:57.414Z","1.0.0":"2017-10-31T00:50:14.884Z"},"author":{"name":"Brandon Dail","email":"brandon.dail@formidable.com"},"license":"MIT","keywords":["react","animation","radium","css-in-js"],"description":"A collection of animations for inline styles","maintainers":[{"email":"sarahmichelleegan@gmail.com","name":"sarmeyer"},{"email":"mariano.martinez@formidable.com","name":"mariano-formidable"},{"email":"ryan@loose-bits.com","name":"ryan.roemer"},{"email":"admin@formidablelabs.com","name":"formidable-owner"},{"email":"npm@formidablelabs.com","name":"formidablelabs"},{"email":"sarah.wright@formidable.com","name":"sarahformidable"},{"email":"senesealessandro@gmail.com","name":"ceceppa"},{"email":"Kierkegaurd@gmail.com","name":"aweary"}],"readme":"# react-animations\n\n\nA collection of animations that can be used with any inline style library that supports using objects to define keyframe animations, such as Radium or Aphrodite. React-animations implements all animations from [animate.css](https://daneden.github.io/animate.css/).\n\n[Check out the interactive demo](http://react-animations.herokuapp.com/).\n\n### Usage\n\nYou can import each animation directly from the main package\n\n```js\nimport { fadeIn } from 'react-animations'\n```\n\nor you can import a specific animation directly\n\n```js\nimport fadeIn from 'react-animations/lib/fade-in'\n```\n\n\n### Usage with Radium\n\n```js\nimport React from 'react';\nimport { bounce } from 'react-animations';\nimport Radium, {StyleRoot} from 'radium';\n\nconst styles = {\n bounce: {\n animation: 'x 1s',\n animationName: Radium.keyframes(bounce, 'bounce')\n }\n}\n\nclass Test extends React.Component {\n render() {\n \n
\n
\n \n }\n}\n\n```\n\n### Usage with Aphrodite\n\n```js\nimport { bounce } from 'react-animations';\nimport { StyleSheet, css } from 'aphrodite';\n\nconst styles = StyleSheet.create({\n bounce: {\n animationName: bounce,\n animationDuration: '1s'\n }\n})\n```\n\n### Usage with JSS\n\n```js\nimport { bounce } from 'react-animations';\nimport jss from 'jss'\nimport preset from 'jss-preset-default'\n\njss.setup(preset())\n\nconst {classes} = jss.createStyleSheet({\n '@keyframes bounce': bounce,\n bounce: {\n animationName: 'bounce',\n animationDuration: '1s',\n },\n}).attach()\n```\n\n### Usage with `styled-components`\n\n```js\nimport styled, { keyframes } from 'styled-components';\nimport { bounce } from 'react-animations';\n\nconst bounceAnimation = keyframes`${bounce}`;\n\nconst BouncyDiv = styled.div`\n animation: 1s ${bounceAnimation};\n`;\n```\n\n## Animations\n\nBelow is a list of all available animations\n\n`bouceOut`\n\n`bounce`\n\n`bounceIn`\n\n`bounceInDown`\n\n`bounceInLeft`\n\n`bounceInRight`\n\n`bounceInUp`\n\n`bounceOutDown`\n\n`bounceOutLeft`\n\n`bounceOutRight`\n\n`bounceOutUp`\n\n`fadeIn`\n\n`fadeInDown`\n\n`fadeInDownBig`\n\n`fadeInLeft`\n\n`fadeInLeftBig`\n\n`fadeInRight`\n\n`fadeInRightBig`\n\n`fadeInUp`\n\n`fadeInUpBig`\n\n`fadeOut`\n\n`fadeOutDown`\n\n`fadeOutDownBig`\n\n`fadeOutLeft`\n\n`fadeOutLeftBig`\n\n`fadeOutRight`\n\n`fadeOutRightBig`\n\n`fadeOutUp`\n\n`fadeOutUpBig`\n\n`flash`\n\n`flip`\n\n`flipInX`\n\n`flipInY`\n\n`flipOutX`\n\n`flipOutY`\n\n`headShake`\n\n`hinge`\n\n`jello`\n\n`lightSpeedIn`\n\n`lightSpeedOut`\n\n`pulse`\n\n`rollIn`\n\n`rollOut`\n\n`rotateIn`\n\n`rotateInDownLeft`\n\n`rotateInDownRight`\n\n`rotateInUpLeft`\n\n`rotateInUpRight`\n\n`rotateOut`\n\n`rotateOutDownLeft`\n\n`rotateOutDownRight`\n\n`rotateOutUpLeft`\n\n`rotateOutUpRight`\n\n`rubberBand`\n\n`shake`\n\n`slideInDown`\n\n`slideInLeft`\n\n`slideInRight`\n\n`slideInUp`\n\n`slideOutDown`\n\n`slideOutLeft`\n\n`slideOutRight`\n\n`slideOutUp`\n\n`swing`\n\n`tada`\n\n`wobble`\n\n`zoomIn`\n\n`zoomInDown`\n\n`zoomInLeft`\n\n`zoomInRight`\n\n`zoomInUp`\n\n`zoomOut`\n\n`zoomOutDown`\n\n`zoomOutLeft`\n\n`zoomOutRight`\n\n`zoomOutUp`\n\n\n## Merge\n\nreact-animations also exports a `merge` function that takes two animations and returns a new animation that combines the transforms from both. This is experimental and wont work (well) with animations that have conflicting transforms, such as `fadeIn` and `fadeOut`. The merged animation can be used just like any of the imported animations.\n\n\n```js\n\nimport { merge, tada, flip } from 'react-animations';\nconst tadaFlip = merge(tada, flip);\n```\n","readmeFilename":"README.md","users":{"wuamin":true,"fmakareev":true}}