{"id":16365200,"url":"https://github.com/xiaoluoboding/vue-digit-animation","last_synced_at":"2026-02-12T10:30:17.482Z","repository":{"id":57395654,"uuid":"297513083","full_name":"xiaoluoboding/vue-digit-animation","owner":"xiaoluoboding","description":"A digit animation component with wheel/slide effect for Vue 3.","archived":false,"fork":false,"pushed_at":"2021-05-27T01:57:50.000Z","size":1768,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-31T01:02:30.195Z","etag":null,"topics":["animation","component-library","digital","slide","vue3","wheel"],"latest_commit_sha":null,"homepage":"https://vue-digit-animation.vercel.app/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xiaoluoboding.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["xiaoluoboding"]}},"created_at":"2020-09-22T02:25:37.000Z","updated_at":"2023-09-08T10:25:10.000Z","dependencies_parsed_at":"2022-09-10T00:02:02.756Z","dependency_job_id":null,"html_url":"https://github.com/xiaoluoboding/vue-digit-animation","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoluoboding%2Fvue-digit-animation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoluoboding%2Fvue-digit-animation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoluoboding%2Fvue-digit-animation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoluoboding%2Fvue-digit-animation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xiaoluoboding","download_url":"https://codeload.github.com/xiaoluoboding/vue-digit-animation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239809559,"owners_count":19700642,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","component-library","digital","slide","vue3","wheel"],"created_at":"2024-10-11T02:42:55.056Z","updated_at":"2026-02-12T10:30:17.448Z","avatar_url":"https://github.com/xiaoluoboding.png","language":"Vue","funding_links":["https://github.com/sponsors/xiaoluoboding"],"categories":[],"sub_categories":[],"readme":"# Digit Animation\n\n\u003cp align=\"left\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-digit-animation\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vue-digit-animation.svg\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/xiaoluoboding/vue-digit-animation\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/xiaoluoboding/vue-digit-animation.svg\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/xiaoluoboding/vue-digit-animation\"\u003e\u003cimg src=\"https://img.shields.io/github/license/xiaoluoboding/vue-digit-animation.svg\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003e A digit animation component with wheel/slide effect for Vue 3.\n\n## Preview\n\n### Gif\n\n![vue-digit-animation](https://cdn.jsdelivr.net/gh/xiaoluoboding/image-hub@latest/images/2020/11/202011_vue-digit-animation.gif)\n\n### Online Demo\n\n[Edit on CodePen](https://codepen.io/xiaoluoboding/pen/NWrJGJq)\n\n### Vercel\n\n[vue-digit-animation.vercel.app/](vue-digit-animation.vercel.app/)\n\n### Codesandbox\n\n[![Edit Digit Wheel Animation For Vue 3 Demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/digit-wheel-animation-for-vue-3-demo-df5k2?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n## Installation\n\n```bash\nnpm i vue-digit-animation -S\nor\nyarn add vue-digit-animation -S\n```\n\n## Import\n\n### Import all the components\n\n```js\n// main.js\nimport { createApp } from 'vue'\nimport App from './App.vue'\n\nimport VueDigitAnimation from 'vue-digit-animation'\n\ncreateApp(App)\n  .use(VueDigitAnimation)\n  .mount('#app')\n```\n\n### Use in your component\n\n```js\nimport { DigitAnimationGroup, DigitWheel } from 'vue-digit-animation'\n\nexport default {\n  components: {\n    DigitAnimationGroup,\n    DigitWheel\n  }\n  ...\n}\n```\n\n## Usage\n\n### DigitWheel\n\nSingle `\u003cdigit-wheel\u003e` component for display single digit with wheel effect\n\n**Demo**\n\n```html\n\u003cdigit-wheel\n  size=\"6xl\"\n  use-ease=\"Quit.easeInOut\"\n  :digit=\"6\"\n  :duration=\"1000\"\n/\u003e\n```\n\n**Template**\n\n```typescript\ninterface DigitProps {\n  digit: number; // the digit value\n  size: string; // the digit preset font-size or custom font-size\n  duration: number; // Sets the length of time that animation completed, Unit is milliseconds(1000)\n  useEase: string; // transition easing function\n}\n```\n\n### DigitAnimationGroup\n\nA group of `\u003cdigit-wheel\u003e` or `\u003cdigit-ruler\u003e` component for display multiple digits\n\n**Template**\n\n```html\n\u003cdigit-animation-group\n  size=\"6em\"\n  format=\"0,0\"\n  use-ease=\"Quit.easeInOut\"\n  stagger\n  :digits=\"9527\"\n  :duration=\"1000\"\n/\u003e\n```\n\n**Props**\n\n```typescript\ninterface DigitsProps {\n  digits: number; // the digits value\n  size: string; // the digits preset font-size or custom font-size\n  gutter: number; // digits Spacing, default is 0px\n  duration: number; // sets the length of time that animation completed, Unit is milliseconds(1000)\n  stagger: boolean; // whether animation display with stagger effect\n  useEase: string; // transition easing function\n  format: string; // provide number format use numeral (0,0)\n}\n```\n\n### With TypeScript\n\n```typescript\ndeclare module '*.vue' {\n  import type { DefineComponent } from 'vue'\n  const component: DefineComponent\u003c{}, {}, any\u003e\n  export default component\n}\n\n// declare `vue-digit-animation` as a module\ndeclare module 'vue-digit-animation'\n```\n\n## License\n\nMIT [@xiaoluoboding](https://github.com/xiaoluoboding)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaoluoboding%2Fvue-digit-animation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxiaoluoboding%2Fvue-digit-animation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaoluoboding%2Fvue-digit-animation/lists"}