{"_id":"@blackbox-vision/styled-animation","_rev":"7-1d5747b36ea8acb47d538b9d65d794d3","name":"@blackbox-vision/styled-animation","dist-tags":{"latest":"2.1.1"},"versions":{"2.0.0":{"name":"@blackbox-vision/styled-animation","description":"Handle animations with style","version":"2.0.0","license":"MIT","esnext":"dist-src/index.js","main":"dist-node/index.js","module":"dist-web/index.js","types":"dist-types/index.d.ts","pika":true,"sideEffects":false,"keywords":["styled-components","animate.css","react-animations"],"homepage":"https://github.com/BlackBoxVision/styled-animation#readme","bugs":{"url":"https://github.com/BlackBoxVision/styled-animation/issues"},"repository":{"type":"git","url":"git+https://github.com/BlackBoxVision/styled-animation.git"},"dependencies":{"react-animations":"^1.0.0","styled-components":"^4.1.3"},"devDependencies":{"@babel/core":"^7.3.4","@babel/plugin-proposal-class-properties":"^7.3.4","@babel/plugin-proposal-object-rest-spread":"^7.3.4","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@commitlint/cli":"^7.5.2","@commitlint/config-conventional":"^7.5.0","@pika/plugin-build-node":"^0.3.14","@pika/plugin-build-types":"^0.3.14","@pika/plugin-build-web":"^0.3.14","@pika/plugin-standard-pkg":"^0.3.14","@storybook/addon-actions":"^5.0.1","@storybook/addon-links":"^5.0.1","@storybook/addons":"^5.0.1","@storybook/react":"^5.0.1","@storybook/theming":"^5.0.1","@types/react":"^16.8.8","@types/styled-components":"^4.1.12","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","chai":"^4.1.0","enzyme":"^2.9.1","eslint":"^5.15.2","eslint-config-react-app":"^3.0.8","eslint-import-resolver-lerna":"^1.1.0","eslint-plugin-flowtype":"^3.4.2","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.12.4","eslint-plugin-react-hooks":"^1.5.1","husky":"^1.3.1","jest":"^24.5.0","jsdom":"^11.1.0","lint-staged":"^8.1.5","mocha":"^3.4.2","prettier":"^1.16.4","react":"^16.3.1","react-dom":"^16.3.1","react-test-renderer":"^15.6.1","rimraf":"^2.6.3"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_id":"@blackbox-vision/styled-animation@2.0.0","_npmVersion":"6.4.1","_nodeVersion":"11.5.0","_npmUser":{"name":"jonatansalas","email":"jonatan.salas@blackbox-vision.tech"},"dist":{"integrity":"sha512-NQKacRt1ZHnY3zv1rbvAX4aRn6Iwuy5O57Sq7u2ZMig6h93hDdTTwIvMoh0UEGCQwbBpWkIiHuZtzurc0t88aA==","shasum":"ab750864b408e954f6dd578c688d558bb8e9324e","tarball":"https://registry.npmjs.org/@blackbox-vision/styled-animation/-/styled-animation-2.0.0.tgz","fileCount":10,"unpackedSize":15895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcjdpQCRA9TVsSAnZWagAA1awP/3nJzMeHz4fYkAItWSzO\nt4PpG/+vkMojQNnyPM1qZkwLEI1qiHrFNlhOagHNto7T64oyVSXOxINQ+HQ+\n2lbeEje8g4fB3IyhYUyGePU9qaB1j8p9kOBLXxRF6gxcD6ettYFAPBaZQZr6\nt4gG+1//N/UbJK8l2REOEXNViH7jWrXuamD9OrsFnM00YYxFXtWgJhr3utC+\nb7TGCKwZ5biiaOWz0uta2rGR+PPKMVhaE7cDdqYdenE/9o/8QRU6IzQ1q+je\npcPAg/udqKlPPmxwmMc+ANzvUxI1WDM9i44U8iWz7EC2xpY1t9sVQhLAlq7E\nzcFI+C+VciyQJRWwq2C/zec/GqTYInwWAt8f28bZkBHiEr/hi5jYOtbgVA1w\ngB8dXVMfkNsAhD0q9ZKs1h/KbnFS2+bUsJB3Tlyq49Kl/AF3kYEWA8lHRfch\naNUULrxPeMvS2Bg+iRXR9+XzKEd9jznjDAl+/NtejQlQ37h7vj86FAtGJ8Wn\ntdOGgxYCSwyAYeL2akt+bGtTnROiVXMTL9XZVyyynIXj7mINne6JuPZA3ikg\nmfllmAgSt4WFv8VlTP5w5CgAHnt9ULhzxW9xgmtWe+VAiW1DssNP9O/hLytv\nH0szdORY8qeO2bMFf7MlUWc5DZz2gcuFrtHYmwm/cLb5KgJf7aKbGM6f1/Uk\nSgke\r\n=Tp39\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAsuPj/1Saew+e6I3e9ARyV81W5RyWq+YyhXsNwx+JqgAiBvrFadVs/u3KGVYo6YEi2z7Xe4ZTxCaeGGqcOATpQEbA=="}]},"maintainers":[{"name":"jonatansalas","email":"jonatan.salas@blackbox-vision.tech"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-animation_2.0.0_1552800335963_0.14821701428530765"},"_hasShrinkwrap":false},"2.1.0":{"name":"@blackbox-vision/styled-animation","description":"Handle animations with style","version":"2.1.0","license":"MIT","esnext":"dist-src/index.js","main":"dist-node/index.js","module":"dist-web/index.js","types":"dist-types/index.d.ts","pika":true,"sideEffects":false,"keywords":["styled-components","animate.css","react-animations"],"homepage":"https://github.com/BlackBoxVision/styled-animation#readme","bugs":{"url":"https://github.com/BlackBoxVision/styled-animation/issues"},"repository":{"type":"git","url":"git+https://github.com/BlackBoxVision/styled-animation.git"},"dependencies":{"react-animations":"^1.0.0","styled-components":"^4.1.3"},"peerDependencies":{"react":"^16.3.1"},"devDependencies":{"@babel/core":"^7.3.4","@babel/plugin-proposal-class-properties":"^7.3.4","@babel/plugin-proposal-object-rest-spread":"^7.3.4","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@commitlint/cli":"^7.5.2","@commitlint/config-conventional":"^7.5.0","@pika/plugin-build-node":"^0.3.14","@pika/plugin-build-types":"^0.3.14","@pika/plugin-build-web":"^0.3.14","@pika/plugin-standard-pkg":"^0.3.14","@storybook/addon-actions":"^5.0.1","@storybook/addon-links":"^5.0.1","@storybook/addons":"^5.0.1","@storybook/react":"^5.0.1","@storybook/storybook-deployer":"^2.8.1","@storybook/theming":"^5.0.1","@types/react":"^16.8.8","@types/styled-components":"^4.1.12","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","chai":"^4.1.0","enzyme":"^2.9.1","eslint":"^5.15.2","eslint-config-react-app":"^3.0.8","eslint-import-resolver-lerna":"^1.1.0","eslint-plugin-flowtype":"^3.4.2","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.12.4","eslint-plugin-react-hooks":"^1.5.1","husky":"^1.3.1","jest":"^24.5.0","jsdom":"^11.1.0","lint-staged":"^8.1.5","mocha":"^3.4.2","prettier":"^1.16.4","react":"^16.3.1","react-test-renderer":"^15.6.1","rimraf":"^2.6.3"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_id":"@blackbox-vision/styled-animation@2.1.0","_npmVersion":"6.4.1","_nodeVersion":"11.5.0","_npmUser":{"name":"jonatansalas","email":"jonatan.salas@blackbox-vision.tech"},"dist":{"integrity":"sha512-/5wS+feB7hPh2rMX/EWOfYpshkPFvc4p5hkkyd7nDUI8ZgBDnje+A0rpxZcsi4hyEDumq+YXn20AKz5AyJc+kg==","shasum":"9f2643106f2043258b676dbdd8b30590a47f4f07","tarball":"https://registry.npmjs.org/@blackbox-vision/styled-animation/-/styled-animation-2.1.0.tgz","fileCount":13,"unpackedSize":19309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcjoe9CRA9TVsSAnZWagAAkXgP/07o8N6PNCPLEka/i2Pl\nud7W00Ev77AUGBLEyWuzzSn3XYzpeGYcUL7AYHD+Lp/TzvmyPVC/mAqNwgY5\nArDotIJS+dBHxO8jfWAklTf/bw7uPfF8OHG6SoOVYC4Si4QKga5SS7rQImhh\n533/fNlaYTIZjvaX7gd5IO5nduw989yXH3ssNPosSXJQt360aDKKm/3j0wXl\nQjoHKD8hMxgDCIeP10NdYSeVSkdTrq6FsDRQEYfv9Iqjg+2b+ioH0fOQ+3AK\nEZB8ccf+Ub525iWf5j/3KRzL0ym/mtuqWxgN2VNdRwwaEYikeYuuDKgZJqg5\nvrEe8OrTlP05mjQfygrV8C82BhTc619FTrUnsARWAezUYSoDVDFfb4aU4g/W\ns44QlTed/KboD+F3+8EYnpjquVYDjFrX9J9qJ82twltZ1DsnQGAgnU+prh0b\n/lXXuyip9GfkS7e4y2yg2KXIvkF9+EHRxszZiM/dBvfO/j9z2Lb8jCgKHsFa\n9I0QjyvFjRxRaZGkQUxbr/AO9vV4X551rG757NwC82MdEQT6VzZgLeAMf1Gt\nidFb0qlRBLWwwsbfKlIVNoWZNXKELLbj9NHcJCUfZmnrrzgCLw8BCgsX6Eaw\nvCIrT7MbO4HNg5o/ff9Ir882tEKOWVjs2HG5F74RgRSTrLquOj1xP3Q4cawl\npP0W\r\n=BSsY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF5JtvzjjvEBQuZu6hR/vkL14hWrdhG9mp2g1j7zEyDLAiBPBVz6EvkEWQPhybw2/ZIPtSsSOLNOm0i51rwQ+9YnDw=="}]},"maintainers":[{"name":"jonatansalas","email":"jonatan.salas@blackbox-vision.tech"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-animation_2.1.0_1552844733122_0.8431884933534144"},"_hasShrinkwrap":false},"2.1.1":{"name":"@blackbox-vision/styled-animation","description":"Handle animations with style","version":"2.1.1","license":"MIT","esnext":"dist-src/index.js","main":"dist-node/index.js","module":"dist-web/index.js","types":"dist-types/index.d.ts","pika":true,"sideEffects":false,"keywords":["styled-components","animate.css","react-animations"],"homepage":"https://github.com/BlackBoxVision/styled-animation#readme","bugs":{"url":"https://github.com/BlackBoxVision/styled-animation/issues"},"repository":{"type":"git","url":"git+https://github.com/BlackBoxVision/styled-animation.git"},"dependencies":{"react-animations":"^1.0.0","styled-components":"^4.1.3"},"peerDependencies":{"react":"^16.3.1"},"devDependencies":{"@babel/core":"^7.3.4","@babel/plugin-proposal-class-properties":"^7.3.4","@babel/plugin-proposal-object-rest-spread":"^7.3.4","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@commitlint/cli":"^7.5.2","@commitlint/config-conventional":"^7.5.0","@pika/plugin-build-node":"^0.3.14","@pika/plugin-build-types":"^0.3.14","@pika/plugin-build-web":"^0.3.14","@pika/plugin-standard-pkg":"^0.3.14","@storybook/addon-actions":"^5.0.1","@storybook/addon-links":"^5.0.1","@storybook/addons":"^5.0.1","@storybook/react":"^5.0.1","@storybook/storybook-deployer":"^2.8.1","@storybook/theming":"^5.0.1","@types/react":"^16.8.8","@types/styled-components":"^4.1.12","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","chai":"^4.1.0","enzyme":"^2.9.1","eslint":"^5.15.2","eslint-config-react-app":"^3.0.8","eslint-import-resolver-lerna":"^1.1.0","eslint-plugin-flowtype":"^3.4.2","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.12.4","eslint-plugin-react-hooks":"^1.5.1","husky":"^1.3.1","jest":"^24.5.0","jsdom":"^11.1.0","lint-staged":"^8.1.5","mocha":"^3.4.2","prettier":"^1.16.4","react":"^16.3.1","react-test-renderer":"^15.6.1","rimraf":"^2.6.3"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_id":"@blackbox-vision/styled-animation@2.1.1","_npmVersion":"6.4.1","_nodeVersion":"11.5.0","_npmUser":{"name":"jonatansalas","email":"jonatan.salas@blackbox-vision.tech"},"dist":{"integrity":"sha512-zFDrm7WP9PMM4i+8DTZe+hFlkwdR74HvuDVbP9Db29f3bM6huViE+CP3q6zz6UcCQcQ+SM4uL9rsZI8fuuMiQQ==","shasum":"f12ac9fd098844039ad5a0f537e857b1a22fde10","tarball":"https://registry.npmjs.org/@blackbox-vision/styled-animation/-/styled-animation-2.1.1.tgz","fileCount":13,"unpackedSize":19343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2Bj0CRA9TVsSAnZWagAAA28P/28XO5D6yT96lULhZBps\nMQUuOB4ZPljBrIQeRSStnX5vw/eqePGgKyY6B/o++erecY0NA4ACYgGJW5kf\ntjmk4CWXxvw1C9fvnu3DBZk3Nm6T86JHU6L766t0mENwwRvDR3wVOkmARc62\niwbwOf5uCFJ96+FqSugxQn7XmF3RqGdbvPAFjX3W1R80ooYq2I39z6Ruw7o2\nh9cK63u8glDPo8h5WLMKcrK5nb13Z54XjJ1KMOxKt8soP7hqYbkKBiKT5/q2\n25GxWQz1jPkOsLFuq1Z3Q4n4IM2DwTdjNQSwS2xR6GS8MIntmyevwMqxrDIY\nHrMP5zfPF81+eqpJ7sPdR/pf3Qip1bGgMopIT0YwQIg6YdYImxcwzG6FmIy4\nCgwaw5ZlRwwyuB+cK566DCQ3Dw57gx9zv39nPx2HrSexdnsgR9z2ADAR0Wu3\n+ujnRAPs7sGsG5Q2wSmtYHe8+tF6Pox1lDSGLxE3bpNFSNQr6ONLMgIJj88S\nmCT3w686paJmD0P6uKW59oJtAL8ius3FiKUJjeuxWoF/XM+mJxo9f2AbDsuN\nwYmTv8EUHjGLtwKGZjjQ9bBiWlUD8m2cmcYTr+fiQ2UcoGBdEtgo1LxBapte\ncdBcBHu4+3bL2WJSQ+5PQbvXtGP9ecOa1gvFw7YSr7C+h+i1rGyghIY5bN/I\nstey\r\n=XuhV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID5YizQa3ljNBfZVTVxhesGamnbYqHN7Fp3JUv1vlu2yAiBXByi87jdyE3S1JP2v3/tdG4BjTTsy2gUUsWTR5iia3g=="}]},"maintainers":[{"name":"jonatansalas","email":"jonatan.salas@blackbox-vision.tech"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-animation_2.1.1_1552844959001_0.6117323880535526"},"_hasShrinkwrap":false}},"time":{"created":"2019-03-17T05:25:35.774Z","2.0.0":"2019-03-17T05:25:36.100Z","modified":"2022-04-04T19:19:57.066Z","2.1.0":"2019-03-17T17:45:33.256Z","2.1.1":"2019-03-17T17:49:19.143Z"},"maintainers":[{"email":"jonatan.salas@blackbox-vision.tech","name":"jonatansalas"},{"email":"manuel.tuero@blackbox-vision.tech","name":"manutuero"}],"description":"Handle animations with style","homepage":"https://github.com/BlackBoxVision/styled-animation#readme","keywords":["styled-components","animate.css","react-animations"],"repository":{"type":"git","url":"git+https://github.com/BlackBoxVision/styled-animation.git"},"bugs":{"url":"https://github.com/BlackBoxVision/styled-animation/issues"},"license":"MIT","readme":"# Styled Animation [![npm version](https://badge.fury.io/js/%40blackbox-vision%2Fstyled-animation.svg)](https://badge.fury.io/js/%40blackbox-vision%2Fstyled-animation) [![License: MIT](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://opensource.org/licenses/MIT) [![Known Vulnerabilities](https://snyk.io/test/github/blackboxvision/styled-animation/badge.svg)](https://snyk.io/test/github/blackboxvision/styled-animation)\n\nHandle animations with style :sunglasses:. Check out the [demo](https://blackboxvision.github.io/styled-animation/).\n\n## Installation\n\n### YARN\n\n```javascript\nyarn add @blackbox-vision/styled-animation\n```\n\n### NPM\n\n```javascript\nnpm install --save @blackbox-vision/styled-animation\n```\n\n## Usage\n\n### Styled-animation supports all the animations provided by [react-animations](http://react-animations.herokuapp.com/)\n\nThe usage is really simple:\n\n```jsx\nimport { Animation } from '@blackbox-vision/styled-animation';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nconst Example = () => (\n  <Animation name=\"fadeOutDown\" duration=\"2s\" timing=\"ease-out\">\n    Hey!, i'm animated!\n  </Animation>\n);\n\nReactDOM.render(<Example />, document.getElementById('root'));\n```\n\nAlso is possible to merge multiple animations, separating each animation name by a space:\n\n```jsx\nimport { Animation } from '@blackbox-vision/styled-animation';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nconst Example = () => (\n  <Animation name=\"shake bounce\">Hey!, i'm mixed!</Animation>\n);\n\nReactDOM.render(<Example />, document.getElementById('root'));\n```\n\n## Props\n\n`Animation` component use the following props:\n\n| Properties | Types    | Default Value | Description                                          |\n| ---------- | -------- | ------------- | ---------------------------------------------------- |\n| name       | string   | none          | Name or names of the animations to start.            |\n| duration   | string   | none          | Indicates the duration of the Animation.             |\n| timing     | string   | none          | Indicates the timing of the animation.               |\n| fillMode   | string   | none          | Indicates the animation-fill-mode value.             |\n| onStart    | Function | none          | Callback called when the animation keyframes start.  |\n| onEnd      | Function | none          | Callback called when the animation keyframes finish. |\n\n## Issues\n\nPlease, open an [issue](https://github.com/BlackBoxVision/styled-animation/issues) following one of the issues templates. We will do our best to fix them.\n\n## Contributing\n\nIf you want to contribute to this project see [contributing](https://github.com/BlackBoxVision/styled-animation/blob/master/CONTRIBUTING.md) for more information.\n\n## License\n\nDistributed under the **MIT license**. See [LICENSE](https://github.com/BlackBoxVision/styled-animation/blob/master/LICENSE) for more information.\n","readmeFilename":"README.md"}