{"id":48112016,"url":"https://github.com/bukacekd/count-up","last_synced_at":"2026-04-04T16:09:23.860Z","repository":{"id":196791554,"uuid":"697169987","full_name":"bukacekd/count-up","owner":"bukacekd","description":"A tiny dependency-free JavaSript library for animating numeric values.","archived":false,"fork":false,"pushed_at":"2024-12-08T11:50:22.000Z","size":150,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-10T23:57:47.717Z","etag":null,"topics":["animation","count","count-up","counter","countup","number"],"latest_commit_sha":null,"homepage":"https://bukacekd.github.io/count-up","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/bukacekd.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","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}},"created_at":"2023-09-27T07:40:29.000Z","updated_at":"2025-04-10T19:39:06.000Z","dependencies_parsed_at":"2025-01-07T06:41:50.690Z","dependency_job_id":"24e36fa0-e138-46b0-ab8c-f88bd539678f","html_url":"https://github.com/bukacekd/count-up","commit_stats":{"total_commits":10,"total_committers":1,"mean_commits":10.0,"dds":0.0,"last_synced_commit":"c86782e1fa16a9cdec981fd2c0572c31b5653260"},"previous_names":["bukacekd/count-up"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/bukacekd/count-up","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bukacekd%2Fcount-up","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bukacekd%2Fcount-up/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bukacekd%2Fcount-up/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bukacekd%2Fcount-up/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bukacekd","download_url":"https://codeload.github.com/bukacekd/count-up/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bukacekd%2Fcount-up/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31405589,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-04T10:20:44.708Z","status":"ssl_error","status_checked_at":"2026-04-04T10:20:06.846Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","count","count-up","counter","countup","number"],"created_at":"2026-04-04T16:09:23.762Z","updated_at":"2026-04-04T16:09:23.832Z","avatar_url":"https://github.com/bukacekd.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Count up\n\n\u003cp\u003e\n    \u003ca href=\"https://www.npmjs.com/package/@js4y/count-up\"\u003e\u003cimg src=\"https://img.shields.io/badge/dependencies-none-green.svg\" alt=\"none dependencies\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/@js4y/count-up\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/%40js4y%2Fcount-up\" alt=\"npm\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/@js4y/count-up\"\u003e\u003cimg src=\"https://deno.bundlejs.com/badge?q=@js4y/count-up\u0026treeshake=[*]\" alt=\"npm bundle size\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/%40js4y%2Fcount-up\" alt=\"license\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nA tiny dependency-free JavaSript library for animating numeric values.\n\nLive Demo: https://bukacekd.github.io/count-up\n\n## Features\n\n- [easy to use](#usage)\n- rich formatting using [Intl.NumberFormat](#formatter)\n- possibility to define a [custom easing function](#easing)\n- simple [configuration](#configuration) and [api](#methods)\n\n## Installation\n\nNpm\n\n```bash\nnpm install @js4y/count-up\n```\n\nCDN\n\n```bash\n\u003cscript src=\"https://unpkg.com/@js4y/count-up/dist/index.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\nNpm\n\n```javascript\nimport {CountUp} from '@js4y/count-up';\n\nnew CountUp(document.body, {\n    from: 1,\n    to: 10\n});\n```\n\nCDN\n\n```javascript\n\u003cscript src=\"https://unpkg.com/@js4y/count-up/dist/index.js\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\n    new js4y.components.CountUp(document.body, {\n    from: 1000,\n    to: -1000\n});\n\u003cscript\u003e\n```\n\n## Configuration\n\nThe component offers a set of configuration items. Below is an overview of them.\n\n```javascript\nnew CountUp(element: HTMLElement | string, {\n    begin?: Function,\n    complete?: Function,\n    duration?: number,\n    easing?: Function,\n    formattter?: Intl.NumberFormat,\n    from: number,\n    to: number,\n    update?: Function\n});\n```\n\n### begin\n\nrequired: `false`, type: `Function`\n\nThe callback function is triggered when the animation starts playing.\n\n```javascript\nnew CountUp(document.body, {\n    begin: () =\u003e {\n        console.log('start of animation');\n    },\n});\n```\n\n### complete\n\nrequired: `false`, type: `Function`\n\nThe callback function is triggered when the animation is completed.\n\n```javascript\nnew CountUp(document.body, {\n    complete: () =\u003e {\n        console.log('end of animation');\n    },\n});\n```\n\n### duration\n\nrequired: `false`, type: `number`\n\nAnimation duration in milliseconds.\n\n```javascript\nnew CountUp(document.body, {\n    duration: 1000\n});\n```\n\n### easing\n\nrequired: `false`, type: `Function`\n\nA custom easing function of the animation. The function argument represents the animation progress between 0 (start of animation) and 1 (end of animation).\n\n```javascript\nnew CountUp(document.body, {\n    easing: progress =\u003e Math.sin((progress * Math.PI) / 2),\n});\n```\n\nTip: Try one of the easing functions from the https://easings.net/.\n\n### formatter\n\nrequired: `false`, type: `Intl.NumberFormat`\n\nThe number formatter. Allows wide formatting of numbers by locale. By default the formatting follows the [html language](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) of the page.\n\n```\nnew Intl.NumberFormat(document.documentElement.lang, {\n    maximumFractionDigits: 0,\n    minimumFractionDigits: 0\n});\n```\n\nTo set up your own formatter follow the [Intl.NumberFormatter documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).\n\n### from\n\nrequired: `false`, type: `number`\n\nThe beginning of the animation range.\n\n```javascript\nnew CountUp(document.body, {\n    from: 10,\n});\n```\n\nFor numbers greater than [Number.MAX_SAFE_INTEGER](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER) (2\u003csup\u003e53\u003c/sup\u003e - 1) use [BigInt](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt).\n\n### to\n\nrequired: `false`, type: `number`\n\nThe end of animation range.\n\n```javascript\nnew CountUp(document.body, {\n    to: 100,\n});\n```\n\nFor numbers greater than [Number.MAX_SAFE_INTEGER](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER) (2\u003csup\u003e53\u003c/sup\u003e - 1) use [BigInt](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt).\n\n### update\n\nrequired: `false`, type: `Function`\n\nCallback function triggered on every frame as soon as the animation starts playing. The function argument represents the animation progress between 0 (start of animation) and 1 (end of animation).\n\n```javascript\nnew CountUp(document.body, {\n    update: progress =\u003e {\n        console.log('animation progress', progress.toFixed(2));\n    },\n});\n```\n\n## Methods\n\n### create(element, options): CountUp\n\nCreates the component, but without running the animation.\n\n```javascript\nconst countUp = CountUp.create(document.body, {\n    duration: 1000,\n    from: 1,\n    to: 10\n});\n```\n\nTo start the animation, use the constructor.\n\n```javascript\nconst countUp = new CountUp(document.body, {\n    duration: 1000,\n    from: 1,\n    to: 10\n});\n```\n\n### play(): void\n\nThe method starts playing the animation.\n\n```javascript\ncountUp.play();\n```\n\n### pause(): void\n\nThe method pauses the animation.\n\n```javascript\ncountUp.pause();\n```\n\n### cancel(): void\n\nThe method cancels the animation.\n\n```javascript\ncountUp.cancel();\n```\n\n## Browser support\n\n| ![alt chrome](images/chrome.png) | ![alt edge](images/edge.png)  | ![alt firefox](images/firefox.png)  | ![alt opera](images/opera.png) | ![alt safari](images/safari.png) |\n| :-: | :-: | :-: | :-: | :-: |\n| Chrome 24+ | Edge 12+ | Firefox 29+ | Opera 15+ | Safari 10+ |\n\n## License\n\nThe project is licensed under [MIT license](https://opensource.org/license/mit/).\n\n## Related\n\n- [Dialog](https://github.com/bukacekd/dialog) - A tiny dependency-free JavaSript ES6 library built on a dialog element with minimal configuration.\n- [Loader](https://github.com/bukacekd/loader) - A tiny dependency-free javascript loading spinner component with minimal configuration.\n- [lockScroll](https://github.com/bukacekd/lock-scroll) - A set of methods to lock scrolling within an element or an entire page.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbukacekd%2Fcount-up","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbukacekd%2Fcount-up","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbukacekd%2Fcount-up/lists"}