{"id":13457788,"url":"https://github.com/gaoryrt/number-flip","last_synced_at":"2025-03-24T14:32:19.235Z","repository":{"id":47131210,"uuid":"119521014","full_name":"gaoryrt/number-flip","owner":"gaoryrt","description":"🎰 Increase your number with flipping animation","archived":false,"fork":false,"pushed_at":"2024-11-13T07:43:14.000Z","size":759,"stargazers_count":650,"open_issues_count":5,"forks_count":60,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-15T23:16:20.877Z","etag":null,"topics":["animation","flip-animation","javascript"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/embed/throbbing-flower-ncm0q","language":"TypeScript","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/gaoryrt.png","metadata":{"files":{"readme":"README.md","changelog":null,"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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null}},"created_at":"2018-01-30T10:32:15.000Z","updated_at":"2025-03-11T09:27:12.000Z","dependencies_parsed_at":"2024-10-29T02:38:16.103Z","dependency_job_id":"10e6c821-1747-46fb-8a9b-0c4e6a363449","html_url":"https://github.com/gaoryrt/number-flip","commit_stats":{"total_commits":85,"total_committers":7,"mean_commits":"12.142857142857142","dds":"0.16470588235294115","last_synced_commit":"4f69b109a6066e9c3c61476ad8792a4f00c4d7f8"},"previous_names":["gaoryrt/flip"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaoryrt%2Fnumber-flip","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaoryrt%2Fnumber-flip/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaoryrt%2Fnumber-flip/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaoryrt%2Fnumber-flip/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gaoryrt","download_url":"https://codeload.github.com/gaoryrt/number-flip/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245206774,"owners_count":20577582,"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","flip-animation","javascript"],"created_at":"2024-07-31T09:00:36.864Z","updated_at":"2025-03-24T14:32:19.228Z","avatar_url":"https://github.com/gaoryrt.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# number-flip\n[![NPM](https://nodei.co/npm/number-flip.png?mini=true)](https://nodei.co/npm/number-flip/)\n\n\nChange number with flipping animation\n\n![](./demo.gif)\n\n![](./demo2.gif)\n\n[demo on codesandbox](https://codesandbox.io/embed/throbbing-flower-ncm0q)\n\n# install\n```\n$ npm install --save number-flip\n```\n\n# usage\n## import `number-flip`\n```\nimport { Flip } from 'number-flip'\n```\n\n## use it!\n### create one and make it flip immediately:\n```js\nnew Flip({\n  node: $('.flip'),\n  from: 9527,\n  to: 42\n})\n```\n\n### flip one with delay:\n```js\nnew Flip({\n  node: $('.flip'),\n  from: 9527,\n  to: 42,\n  delay: 1 // second\n})\n```\n\n### create one and flip it later:\n```js\nconst el = new Flip({\n  node: $('.flip'),\n  from: 9527\n})\n\nel.flipTo({to: 42})\n```\n\n### customize animation duration:\n```js\nnew Flip({\n  node: document.querySelector('.flip'),\n  from: 9527,\n  to: 42,\n  duration: 2 // second\n})\n```\n\n### more complex usage\n```js\nnew Flip({\n  node: document.querySelector('.flip'),\n  from: 73,\n  to: 25,\n  duration: 2,\n  delay: 1,\n  easeFn: function(pos) {\n    if ((pos/=0.5) \u003c 1) return 0.5*Math.pow(pos,3);\n    return 0.5 * (Math.pow((pos-2),3) + 2);\n  },\n  // for more easing function, see https://github.com/danro/easing-js/blob/master/easing.js\n  systemArr: ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']\n})\n```\n\n### CSS customizable:\nHTML structure of a 3-digits flip would be like:\n```\n.number-flip\n    .ctnr.ctnr0\n        .digit*10\n    .ctnr.ctnr1\n        .digit*10\n    .ctnr.ctnr2\n        .digit*10\n```\n\nThe height / width of `.number-flip` is based on the height / width of `.digit`, you can customize the size by changing the css of `.digit`:\n```css\n  .number-flip { ... }\n  .ctnr { ... }\n  .digit { ... }\n```\n\nor you can rename it in config:\n```js\nnew Flip({\n  containerClassName: 'c',\n  digitClassName: 'd',\n  separatorClassName: 's'\n})\n```\n\n### separator:\nSpearator allowed\n\n```js\nnew Flip({\n  node: $('.flip'),\n  from: 95279527,\n  separator: ','\n})\n```\n\neven more\n\n```js\nnew Flip({\n  node: $('.flip'),\n  from: 95279527,\n  separator: ['万', '亿', '兆'],\n  separateEvery: 4\n})\n```\n\n# syntax\n\n```js\nvar flipInstance = new Flip(options)\nflipInstance.flipTo(instanceOptions)\n```\n\n## return value\nThe returned Flip instance has a function called `flipTo`.  \n`flipTo` takes one `instanceOptions`, so you can start the flip animation whenever you want.\n\n## parameter\n**`options`**\n\n- `node`: An `Element` object representing the animation container. Make sure this element is already existed in the DOM when you `new` the instance.\n- `from`: The number that animation starts from. `Optional` if you want to flip with 0. Expected a positive integer.\n- `to`: The number that animation rolls to. `Optional` if you want to start manually. Expected a positive integer.\n- `duration` `optional`: The animation duration in seconds. If not specified, `duration` defaults to 0.5 second.\n- `delay` `optional`: The delay of animation in seconds. If not specified, there's no `delay`.\n- `easeFn` `optional`: A easing function to be executed. If not specified, `easeFn` defaults [easeInOutCubic](https://github.com/danro/easing-js/blob/4f5e7edbde7f7200a1baf08e357377896c0d207e/easing.js#L39-L42).\n- `systemArr` `optional`: An array ten-lengthed, representing the content of each decimal rolling system. If not specified, `systemArr` defaults to `[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]`.\n- `direct` `optional`: A boolean representing if the number would rolling directly or one by one. For example, from 0 to 99, the ones place would pass 9 digits if is direct. Or if is not directly, would pass 99 digits, 9 rounds for each of the tens place. If not specified, `direct` defaults `true`.\n- `separator`: A string / array representing the separator, defaults off. Could set to a string or an array-of-string.\n- `separateOnly`: A number representing the only separator， defaults `0`.\n- `separateEvery`: The number per digit separator would add to, defaults `3`, won't work if `separateOnly` has been set.\n\n**`instanceOptions`**\n\n- `to`: Same as `options.to`.\n- `duration` `optional`: Same as `options.duration`.\n- `easeFn` `optional`: Same as `options.easeFn`.\n- `direct` `optional`: Same as `options.direct`.\n\n\n# TODO\n- [x] flip with FLIP\n- [x] syntax\n- [ ] browser compatibility list\n\n# license\nMIT\n\n# credit\n[![](./browserstack-logo-600x315.png)](http://browserstack.com/)\n\nSpecial thanks to [Browserstack](http://browserstack.com/) providing cross-browser testing.\n\n# dev and build\n```bash\nyarn dev\nyarn build\n```\n\n# contributing\n1. fork this repo\n2. `git checkout -b NEW-FEATURE`\n3. `git commit -am 'ADD SOME FEATURE'`\n4. `git push origin NEW-FEATURE`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgaoryrt%2Fnumber-flip","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgaoryrt%2Fnumber-flip","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgaoryrt%2Fnumber-flip/lists"}