{"id":17802841,"url":"https://github.com/aykutkardas/drain-js","last_synced_at":"2025-07-21T08:33:01.579Z","repository":{"id":29613047,"uuid":"122234616","full_name":"aykutkardas/drain-js","owner":"aykutkardas","description":"Makes smooth transitions between two numbers.","archived":false,"fork":false,"pushed_at":"2021-11-09T06:51:32.000Z","size":287,"stargazers_count":46,"open_issues_count":0,"forks_count":2,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-06-21T18:41:11.128Z","etag":null,"topics":["animation","react","svelte","transition","utility","vue"],"latest_commit_sha":null,"homepage":"","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/aykutkardas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-20T17:59:24.000Z","updated_at":"2024-05-07T09:31:34.000Z","dependencies_parsed_at":"2022-08-03T15:20:11.844Z","dependency_job_id":null,"html_url":"https://github.com/aykutkardas/drain-js","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/aykutkardas/drain-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aykutkardas%2Fdrain-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aykutkardas%2Fdrain-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aykutkardas%2Fdrain-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aykutkardas%2Fdrain-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aykutkardas","download_url":"https://codeload.github.com/aykutkardas/drain-js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aykutkardas%2Fdrain-js/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266267290,"owners_count":23902334,"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","react","svelte","transition","utility","vue"],"created_at":"2024-10-27T12:44:42.111Z","updated_at":"2025-07-21T08:33:01.559Z","avatar_url":"https://github.com/aykutkardas.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# drain-js\n\n[![npm](https://img.shields.io/npm/v/drain-js?color=%234fc921)](https://www.npmjs.com/package/drain-js)\n[![License](https://img.shields.io/badge/License-MIT-green.svg?color=%234fc921)](https://opensource.org/licenses/MIT)\n\n![Preview](./preview-2.gif)\n\nA callback based utility for making fluent number changes.\n\n## Install\n\n```sh\nnpm install drain-js\n```\n\n```sh\nyarn add drain-js\n```\n\n## Usage\n\n```js\nimport drain from 'drain-js';\n\ndrain({ start: 3000, end: 2750, onInterval: console.log });\n\n// Output\n2906\n2812\n2803\n...\n2752\n2751\n2750\n```\n\n![Preview](./preview.gif)\n\n### Parameters\n\n```ts\ndrain({\n  start: Number,\n  end: Number,\n  speed: Number,\n  onInterval: Function,\n  onComplete: Function,\n});\n```\n\n| Name       | Default   | Description                                                                                                  |\n| ---------- | --------- | ------------------------------------------------------------------------------------------------------------ |\n| speed      | 100       | An animation can be completed in about 10 to 20 steps. The `speed` (ms) value is the time set for each step. |\n| start      | undefined | The value at which the animation will start                                                                  |\n| end        | undefined | The value at which the animation will end.                                                                   |\n| onInterval | undefined | The function that will run at each step until the animation is complete.                                     |\n| onComplete | undefined | The function to run when the animation is complete.                                                          |\n\n### Demo List\n\n| Name             | Status | Type                              | URL                                                                          |\n| ---------------- | ------ | --------------------------------- | ---------------------------------------------------------------------------- |\n| Demo Simple      | ✔️     | Number Transition                 | [Link](https://codepen.io/aykutkardas/pen/BadxjbM?editors=1010)              |\n| Demo             | ✔️     | CSS Animation \u0026 Number Transition | [Link](https://codepen.io/aykutkardas/pen/QWMaeqw?editors=1010)              |\n| Demo with React  | ✔️     | CSS Animation \u0026 Number Transition | [Link](https://codesandbox.io/s/drain-js-react-demo-crzyu)                   |\n| Demo with Vue    | ✔️     | CSS Animation \u0026 Number Transition | [Link](https://codesandbox.io/s/drain-js-vue-demo-pisdm?file=/src/App.vue)   |\n| Demo with Svelte | ✔️     | CSS Animation \u0026 Number Transition | [Link](https://codesandbox.io/s/drain-js-svelte-demo-i2m3e?file=/App.svelte) |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faykutkardas%2Fdrain-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faykutkardas%2Fdrain-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faykutkardas%2Fdrain-js/lists"}