{"_id":"@casperengl/vue-overdrive","_rev":"2-4c163215421a250b6e0033933206db27","name":"@casperengl/vue-overdrive","dist-tags":{"latest":"2.0.1"},"versions":{"2.0.0":{"name":"@casperengl/vue-overdrive","version":"2.0.0","description":"Super easy magic-move transitions for Vue apps, powered by Ramjet","main":"dist/overdrive.umd.js","module":"dist/overdrive.esm.js","unpkg":"dist/overdrive.min.js","repository":{"type":"git","url":"https://github.com/mattrothenberg/vue-overdrive"},"author":{"name":"Matt Rothenberg"},"license":"MIT","publishConfig":{"access":"public"},"scripts":{"build":"rollup -c rollup.config.js","test":"echo 'What tests?'"},"devDependencies":{"@babel/core":"^7.2.2","@vue/compiler-sfc":"^3.0.0","@vue/component-compiler-utils":"^2.3.1","babel-preset-latest":"^6.24.1","eslint":"^5.11.0","eslint-config-prettier":"^3.3.0","eslint-plugin-prettier":"^3.0.0","eslint-plugin-vue":"^5.0.0","prettier":"^1.15.3","rollup":"^1.6.0","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-vue":"^6.0.0-beta.8","vue":"^3.0.0","vue-hot-reload-api":"^2.3.1"},"dependencies":{"ramjet":"^0.6.0-alpha1","vue-demi":"^0.4.0"},"_id":"@casperengl/vue-overdrive@2.0.0","dist":{"shasum":"4c52b6d1cfdc92657423eb520cd03e53ef4a8677","integrity":"sha512-02leuuTpsURYr3mwYXxt4OG67vruIc8dl1NYAMyv5FdS4DRaoXN2kdDkA6EKPznQc286D2IQUNNvmZwxn1mtOw==","tarball":"https://registry.npmjs.org/@casperengl/vue-overdrive/-/vue-overdrive-2.0.0.tgz","fileCount":15,"unpackedSize":387399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgEK8CRA9TVsSAnZWagAAxssQAJ4RT/oWQaCDS5Jf2VBS\n4VSHs1uuSKVd4QzS2dW/odlkwfNN144md2UeRRUKvC5eiSU6bB6WVKre2T5c\nAkDR6G08d9iQm6px7K/WOh41dHscIU53Do6D32/fC0J6mwlHz2OdXVlnMtw0\nxjEsl7av52qcQLmNven7mL3AQAmw5CuouT44e9/lstPXN9DVleV90JYIp6Td\nsQKma6OT7x/OlKmo9Bv5aByMbb9+MGQAI4VhRGol0ZFgPYamZfNmEbzuxSc3\nVGWXhZribRuDWjAN4zi6IBA/ut9eUT9ZyjIUgfWfk/iKLy5jte777MlgFDx2\n6jSxx5hRTSTK5doyRwKhemRbwYrTAmsUv27AO1mBLsEruNF/F36LPuUkwJE/\ny1hAu9heVAC+XqJaLBV84geWeP9/v7kywS0r3Fl7WKGFNfHrsSj4z+d2E8Vb\nFkRPv2vsTTAUffMbuTracAXaq4ibJyugWG8tusx277ffYptRJHYDM3S7/TRK\nsJezbnnyqzLu98m8q3jLvsZhrTjiu3WpUvCWU1YaW95ada8ynIe0KafOcMGx\nTl+kRkRAcCMs1n8NyYYuVpaDlB55qtLKe7iJI8Tv1ANz4StWETdbitZQniDo\nTu2AI5vOrqA0tyzMMirxF+yyJzAzJxq2F2Q8gp1tpB2KfR2VhDRVvJP+/a3e\nAKqY\r\n=CsSz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDewyhw0a44v+8D6XGouRl8GWT34I5qbIXm2Rj7rZExTwIhAIMJUSWGbvHUpELfIWfJUz4/k0Q3x+DslkKwfPK87its"}]},"maintainers":[{"name":"casperengl","email":"me@casperengelmann.com"}],"_npmUser":{"name":"casperengl","email":"me@casperengelmann.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-overdrive_2.0.0_1602241211777_0.20254835722669284"},"_hasShrinkwrap":false},"2.0.1":{"name":"@casperengl/vue-overdrive","version":"2.0.1","description":"Super easy magic-move transitions for Vue apps, powered by Ramjet","main":"dist/overdrive.umd.js","module":"dist/overdrive.esm.js","unpkg":"dist/overdrive.min.js","repository":{"type":"git","url":"https://github.com/mattrothenberg/vue-overdrive"},"author":{"name":"Matt Rothenberg"},"license":"MIT","publishConfig":{"access":"public"},"scripts":{"build":"rollup -c rollup.config.js","test":"echo 'What tests?'"},"devDependencies":{"@babel/core":"^7.2.2","@vue/compiler-sfc":"^3.0.0","@vue/component-compiler-utils":"^2.3.1","babel-preset-latest":"^6.24.1","eslint":"^5.11.0","eslint-config-prettier":"^3.3.0","eslint-plugin-prettier":"^3.0.0","eslint-plugin-vue":"^5.0.0","prettier":"^1.15.3","rollup":"^1.6.0","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-vue":"^6.0.0-beta.8","vue":"^3.0.0","vue-hot-reload-api":"^2.3.1"},"dependencies":{"ramjet":"^0.6.0-alpha1","vue-demi":"^0.4.0"},"_id":"@casperengl/vue-overdrive@2.0.1","dist":{"shasum":"08ecc9dd58dd11617fcb72bfd3c0370344ed432f","integrity":"sha512-lw7G/Rq1m7bUFOOFPIn2QD6bgOdXvLGSf8RnEUbJ+GfAYnZU5BnqIVJnYv8d9gIXn84T2e4b75s+xWQWdD/zuA==","tarball":"https://registry.npmjs.org/@casperengl/vue-overdrive/-/vue-overdrive-2.0.1.tgz","fileCount":15,"unpackedSize":387447,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgEsWCRA9TVsSAnZWagAAxSUQAIeQPZudWKh5K/akO8gs\neYn/wGRfElHdEj8z59xTgp9/Z++cEZAQFfp4tpMDzdU6BJ0gt1H1byUDR8Tp\nrs9OoY961c5rAR2UdyHBgB6VVdY7nM6yPpHPAbCmSf312DIpA/7DRdJgEPHQ\nUbKRwg6Y+Eds6sglZ3PwZht+oEcLA+qug+EZPcP73bfNy/7+aGKpEgfSqZvd\nQUJMjt3lZbRklbQNUVYu1BGrzdUtA8Dn78IuHXWSfPrV2S0PCr12b5FaVkos\nfOooLqJBXmSvIMJd8GmxrDE44HwdzzcN71Lu4IE06FQtNJyLweoN5qnD+d6H\n2F5sFbdEUsULOlVjkuyoaqnLjGZRZ3FZ0oWvLNVgCnlfn+gOnRaPByiTcEjh\nQj294FCfTDtpGEHKCLgExerEVHxiQS8mTWuIRDNtsHwBWJa76l9cHlP4NZPQ\n/fpM2rIlpIKD6pcCqeZBUEVgcxOZ3VyjY4kdnWTPII1nbK3QHTKD2QGJg07K\naLcKXMLHQ3EHfVWL/RL3fQtDMLCNPPjkm3fNChY7hVztRZSQ5Q7D7Il99qb5\nuT3N7CmQmd3db5WVPhpdNhoK2zSI4hqNniG9pEbImdMfUG/SV2jrHJ7cPjsa\nO/3a4WdLtW/ASrpfTWllnQfATcfBweNFAnlexAX0IOpUIZgx9OIbHrhOSKNf\ng4O3\r\n=FUr2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAWiXgpFtPs0dy/jcislAadqWXf+YItqQqSxUt/zNRH0AiBXutQzNDtEItpX8zSalJwbYuTGXg7QrcBK0k9PH+8zsg=="}]},"maintainers":[{"name":"casperengl","email":"me@casperengelmann.com"}],"_npmUser":{"name":"casperengl","email":"me@casperengelmann.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-overdrive_2.0.1_1602243350404_0.8335056078761682"},"_hasShrinkwrap":false}},"time":{"created":"2020-10-09T11:00:11.724Z","2.0.0":"2020-10-09T11:00:11.905Z","modified":"2022-04-04T22:03:05.043Z","2.0.1":"2020-10-09T11:35:50.535Z"},"maintainers":[{"name":"casperengl","email":"me@casperengelmann.com"}],"description":"Super easy magic-move transitions for Vue apps, powered by Ramjet","repository":{"type":"git","url":"https://github.com/mattrothenberg/vue-overdrive"},"author":{"name":"Matt Rothenberg"},"license":"MIT","readme":"### Heads up!\nThe fate of this repo is uncertain. I recommend using my new library, [`vue-flip-toolkit`](https://github.com/mattrothenberg/vue-flip-toolkit) for all of your magic-move transition needs.\n\n<p align=\"center\">\n  <img width=\"120\" src=\"https://dzwonsemrish7.cloudfront.net/items/0P31353w2O3M130M2K3r/Artboard%201.png\"/>\n</p>\n\n<h2 align=\"center\">vue-overdrive</h2>\n<h5 align=\"center\">Super easy magic-move transitions for Vue apps, powered by Ramjet</h5>\n<p align=\"center\">\n  <a href=\"https://badge.fury.io/js/vue-overdrive\">\n    <img src=\"https://badge.fury.io/js/vue-overdrive.svg\" alt=\"npm version\">\n  </a>\n</p>\n\n\n## Project Install\n\n``` bash\n# npm\nnpm install vue-overdrive\n```\n\n``` bash\n# yarn\nyarn add vue-overdrive\n```\n\n## Warning!\nCurrently, `vue-overdrive` isn't able to morph between shapes with percentage-based `border-radius` values. You'll need to use a pixel-based value, or you'll get a nasty `TypeError`. The issue is being tracked here: https://github.com/Rich-Harris/ramjet/issues/57\n\n## Examples\n\n<img src=\"https://thumbs.gfycat.com/GlamorousThoroughHumpbackwhale-size_restricted.gif\" alt=\"Material\" width=\"320\"/>\n\n### 1) Morph Shapes ([source](examples/src/router/index.js#L22-L38))\nhttps://vue-overdrive.netlify.com/#/shapes\n\n<img src=\"https://imgur.com/YRwM2T8.gif\" alt=\"Shape morph\" width=\"320\"/>\n\n### 2) Material-esque transformation ([source](examples/src/router/index.js#L41-L53))\nhttps://vue-overdrive.netlify.com/#/libraries\n\n<img src=\"https://imgur.com/B6BYxRv.gif\" alt=\"Material transformation\" width=\"320\"/>\n\n### 3) iOS-inspired icon effect ([source](examples/src/router/index.js#L54-L65))\nhttps://vue-overdrive.netlify.com/#/icons\n\n<img src=\"https://imgur.com/vrb7QQ2.gif\" alt=\"iOS icon effect\" width=\"320\"/>\n\n\n## What is it?\nA Vue.js port of the amazing [React Overdrive](https://github.com/berzniz/react-overdrive), using [Ramjet](https://github.com/Rich-Harris/ramjet) under the hood.\n\n## How does it work?\nJust like with React Overdrive, wrap any two elements in a <overdrive id=\"\"></overdrive> component. Add the same id to create a transition between the elements.\n\n### Import and install\n\n```js\nimport Overdrive from 'vue-overdrive'\nVue.use(Overdrive)\n```\n\nor\n\n```js\nimport { VOverdrive } from 'vue-overdrive'\n\n// Register the component locally\ncomponents: {\n  'overdrive': VOverdrive\n}\n```\n\n### Set up (at least) two different routes with Vue Router\n\nInside your routes file –\n```js\n{\n  path: '/circle',\n  name: 'Circle',\n  component: Circle\n},\n{\n  path: '/rectangle',\n  name: 'Rectangle',\n  component: Rectangle \n}\n```\n\n### Scaffold your components\n\nIn `Circle.vue`:\n```vue\n<template>\n  <overdrive id=\"element\" :easing=\"easing\" :duration=\"350\">\n    <div class=\"circle\"></div>\n  </overdrive>\n</template>\n\n<script>\nimport * as easing from 'eases/quart-in-out' // Bring 'yr own easing functions!\nexport default {\n  name: 'el-circle',\n  data () {\n    return {\n      easing\n    }\n  }\n}\n</script>\n\n<style scoped>\n  .circle {\n    width: 100px;\n    height: 100px;\n    border-radius: 50%;\n    background: blue;\n    float: left;\n  }\n</style>\n\n```\n\nAnd in `Rectangle.vue` –\n\n```vue\n<template>\n  <overdrive id=\"element\">\n    <div class=\"rectangle\"></div>\n  </overdrive>\n</template>\n```\n\n### Usage with `v-if`\nIf you're not using Vue Router (and instead using Vue's built-in `v-if` directive), be sure to specify a unique `key` prop on each instance of `<overdrive>`\n\n```vue\n<overdrive key=\"a\" id=\"window\" :duration=\"450\" v-if=\"!windowOpen\">\n  <!-- some element -->\n</overdrive>\n<overdrive key=\"b\" id=\"window\" :duration=\"450\" v-if=\"windowOpen\">\n  <!-- some element -->\n</overdrive>\n```\n\n### Customize it (API)\n\n\n| Prop     \t| Description                                          \t| Default Value   \t|\n|----------\t|------------------------------------------------------\t|-----------------\t|\n| id       \t| Required. A unique string or number to identify the component. \t|                 \t|\n| tag      \t| Wrapping element type                                \t| `div`           \t|\n| duration \t| Animation duration (in milliseconds)                 \t| `250`           \t|\n| easing   \t| Easing Function (must pass a function)               \t| `ramjet.linear` \t|\n\n| Event            \t| Description                                   \t|\n|------------------\t|-----------------------------------------------\t|\n| `@animation-end` \t| Fires once the ramjet animation has completed \t|\n","readmeFilename":"README.md"}