{"_id":"@667/vue-number-animation","name":"@667/vue-number-animation","dist-tags":{"latest":"1.1.2"},"versions":{"1.1.2":{"name":"@667/vue-number-animation","author":{"name":"June07"},"license":"MIT","version":"1.1.2","description":"This is a Vue number plugin. It animates the number that you pass in prop.","main":"index.js","repository":{"type":"git","url":"git+https://github.com/nkoik/vue-animated-number.git"},"bugs":{"url":"https://github.com/nkoik/vue-animated-number/issues"},"homepage":"https://github.com/nkoik/vue-animated-number","keywords":["vue","vuejs","vue2","animation","number","animate number","animated number","vue animated","vue number","vue animation","vue counter","counter reverse","vue animated counter"],"private":false,"dependencies":{"gsap":"^3.6.0"},"gitHead":"9b7740036a3f060de0fd14f6531e9f2374b011c7","_id":"@667/vue-number-animation@1.1.2","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-ArmCm9otWXKGOwliVpwtIT6ajDiRgFVQjqGyIjXEeehDG8HMJkYJq/+5atvQAvZvOXj+GMDUyFNjlA71XRbt/g==","shasum":"f91ff535b09aec1e6e0e37e2701755e1a17fd62d","tarball":"https://registry.npmjs.org/@667/vue-number-animation/-/vue-number-animation-1.1.2.tgz","fileCount":5,"unpackedSize":7015,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE/nhvB9tXwHluF+o1ffpWH5FGD365JtumoGBiWpaaAEAiEAwMbCHRUk5rrhXvTAkbHHzbKKJqnyj8Wpv7G33tUZp/g="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi3tQTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp67w/+PJCFgNwfrVEqjefoeN/MUg22CaENTvJJOn6vkCRqi2Ho2aAa\r\nCDwzgGRhXajkeQaVSdVtIpydgzUrhsltPjMFD0AfGoT1TDpoBXumihqiKMqe\r\n38zV5DL/T2WgpS3DoWTUlTnUlXglPsSaiFp1WH7P9SMtIvmXLTu0lWyQHNnC\r\nHw68ggE0SBOFM4JOAU101pp5Ii8gpyNlawz5EW0demT3o2lIKD3Da5WrnXON\r\nSDk87DM4vovt9eiyvcAJuIt/FVSCCc2EIBRvjlH75sDQ6JT7FLO+vh0CD5mM\r\nTCXWOEwLeU1q1TzaXN0xmu1XwNyBUnKOO0642oAs32gfgd3TH6B2eTFACl6P\r\ntM6/1g4bQGCjUtDsy+tCOSepWEXLg2yZ7r9wkAjAhkH5QQIBAMpZpWBPtuld\r\nIUfvrCsSaEXZ0QePX7uZgbzjZvgjhUPfCtTL7WkqDjm1zzI+xIiX2iWKEsxd\r\nKqCM+Tl1oJxwnCmPRJe0nhSgYvzi6ghEuARN6aAesdVd0DLP3IA2arVh87l9\r\nWrp/3jOtwRizfH5j7ATH/2sYLM8IoGgy/Z5yhnHAO/+/CrXmKu5rcAVmgEeD\r\ncv6Rc7pvq5NI+5q3RD6SE+9OvkWkSUrKsfS6R0VjFMuJbB1pg9CbTbzBV6RF\r\n5NvomBPvlmi7l41GYSYff5J6Gp21BIlS1L0=\r\n=62ZO\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"667","email":"667@june07.com"},"directories":{},"maintainers":[{"name":"667","email":"667@june07.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-number-animation_1.1.2_1658770451416_0.6321196533346523"},"_hasShrinkwrap":false}},"time":{"created":"2022-07-25T17:34:11.343Z","1.1.2":"2022-07-25T17:34:11.605Z","modified":"2022-07-25T17:34:11.754Z"},"maintainers":[{"name":"667","email":"667@june07.com"}],"description":"This is a Vue number plugin. It animates the number that you pass in prop.","homepage":"https://github.com/nkoik/vue-animated-number","keywords":["vue","vuejs","vue2","animation","number","animate number","animated number","vue animated","vue number","vue animation","vue counter","counter reverse","vue animated counter"],"repository":{"type":"git","url":"git+https://github.com/nkoik/vue-animated-number.git"},"author":{"name":"June07"},"bugs":{"url":"https://github.com/nkoik/vue-animated-number/issues"},"license":"MIT","readme":"# Animated Counter - Number  ![VueJS v2.x compatible](https://img.shields.io/badge/vue%202.x-compatible-green.svg)\n\nThis is a Vue number plugin. It animates the number that you pass in prop.\n\n[![GitHub license](https://img.shields.io/github/license/nkoik/vue-animated-number.svg)](https://github.com/nkoik/vue-animated-number/blob/master/LICENSE) [![npm](https://img.shields.io/npm/v/vue-number-animation.svg)](https://www.npmjs.com/package/vue-number-animation) ![icon](https://www.programwitherik.com/content/images/2017/01/87ow-1.png)\n\n## ✔ Demo\n\nhttps://codesandbox.io/s/8256nwlq78\n\n## ✔ Installation\n\nGet the package:\n```bash\nnpm install vue-number-animation\n```\n\n## ✔ Use\n\nRegister Animate Number in your app:\n```js\nimport Vue from 'vue'\nimport VueNumber from 'vue-number-animation'\n\nVue.use(VueNumber)\n\n```\n\nIn your Vue file you can call it like this:\n\n```html\n<number\n    ref=\"number1\"\n\t:from=\"100\"\n\t:to=\"10000\"\n\t:format=\"theFormat\"\n\t:duration=\"5\"\n    :delay=\"2\"\n    easing=\"Power1.easeOut\"/>\n\n<number\n    tag=\"div\"\n    animationPaused\n    ref=\"number2\"\n\t:to=\"10000\"\n\t:duration=\"5\"\n    easing=\"Back.easeIn\"\n    @complete=\"completed\"\n    @click=\"playAnimation\"/>\n\n<script>\nexport default {\n    // Sets the format of the number\n    methods: {\n        theFormat(number) {\n            return number.toFixed(2);\n        },\n        completed() {\n            console.log('Animation ends!');\n        },\n        playAnimation() {\n            this.$refs.number2.play()\n        }\n    }\n}\n</script>\n```\n### API\n\nRequired Prop\n\n| Property | Description | Type | Default |\n|:--|:--|:--|:--|\n| to | Animation end point | <i>Number</i> | - |\n\nOptional Props\n\n| Property | Description | Type | Default |\n|:--|:--|:--|:--|\n| tag | Element wrapper | <i>String</i> | 'span' |\n| from | Animation start point | <i>Number</i> | 0 |\n| duration | Duration of the animation (seconds) | <i>Number</i> | 1 |\n| delay | Amount of delay (seconds) before the animation starts | <i>Number</i> | 0 |\n| easing | Ease of the animation | <i>String</i> | 'Power1.easeOut' |\n| animationPaused | Pauses animation at starting point | <i>Boolean</i> | false |\n\n#### Easing prop\n> Choose from various eases to control the rate of change during the animation.\nThese are all the values that the prop gets. https://greensock.com/docs/Easing\n\n>![eases](https://image.ibb.co/fAYNBo/EASES.png)\n\n``` Don't forget the '.' between ease name eg. Circ.easeInOut```\n\nEvents\n\n| Event | Description |\n|:--|:--|\n| @start | Called when the animation has started |\n| @complete | Called when the animation has completed |\n| @update | Called every time the animation updates (on every frame while the animation is active) |\n\nMethods\n\n| Method | Description |\n|:--|:--|\n| play() | Starts the animation |\n| pause() | Pauses the animation |\n| restart() | Restarts and begins playing forward from the beginning |\n\n## ✔ License\n\nMIT\n","readmeFilename":"README.md"}