{"id":22105227,"url":"https://github.com/zhangyu1818/from-to","last_synced_at":"2026-04-27T12:31:05.131Z","repository":{"id":182966679,"uuid":"656980815","full_name":"zhangyu1818/from-to","owner":"zhangyu1818","description":"Transitioning from one value to another","archived":false,"fork":false,"pushed_at":"2023-06-27T15:52:11.000Z","size":112,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-29T19:11:16.275Z","etag":null,"topics":["animate","animation","spring","tween"],"latest_commit_sha":null,"homepage":"https://zhangyu1818.github.io/from-to/","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/zhangyu1818.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,"governance":null}},"created_at":"2023-06-22T04:01:10.000Z","updated_at":"2023-06-22T08:50:52.000Z","dependencies_parsed_at":null,"dependency_job_id":"72628a0a-8982-4836-965f-6a9cf6ab12a2","html_url":"https://github.com/zhangyu1818/from-to","commit_stats":null,"previous_names":["zhangyu1818/from-to"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/zhangyu1818/from-to","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhangyu1818%2Ffrom-to","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhangyu1818%2Ffrom-to/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhangyu1818%2Ffrom-to/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhangyu1818%2Ffrom-to/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zhangyu1818","download_url":"https://codeload.github.com/zhangyu1818/from-to/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhangyu1818%2Ffrom-to/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32337268,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-26T23:26:28.701Z","status":"online","status_checked_at":"2026-04-27T02:00:06.769Z","response_time":128,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["animate","animation","spring","tween"],"created_at":"2024-12-01T06:39:54.715Z","updated_at":"2026-04-27T12:31:05.113Z","avatar_url":"https://github.com/zhangyu1818.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# From To\n\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/from-to.js)\n\nTransitioning **from** one value **to** another.\n\n[demo](https://zhangyu1818.github.io/from-to/)\n\n---\n\n\"Why reinvent the wheel?\"\n\nSometimes, all you need is an extremely lightweight package to transition from one value to another. It requires no bindings to DOM elements or framework-specific code. In such cases, popular animation libraries may come with additional features that are not necessary.\n\n## Install\n\n```shell\npnpm install from-to.js\n```\n\n## Usage\n\n```ts\nanimate(from: Value, to: Value, options?: Options\u003cValue\u003e) =\u003e Controls\n```\n\nIt supports transition animations for both numerical values and colors.\n\nYou can use `animate(0, 100)` to transition numerical values or `animate([0, 0, 0], [100, 200, 300])` to transition arrays of numerical values. For transitioning colors, you can use `animate('#000', '#fff')`.\n\n### Transition\n\nThe transition type can be either `tween` or `spring`. The default transition type is `tween`.\n\n### tween\n\n```js\nanimate('#FF0000ff', '#8B00FFff', {\n  type: 'tween',\n  ease: 'ease',\n  duration: 3,\n})\n```\n\n**ease**: `ease` | `liner` | `easeIn` | `easeOut` | `easeInOut`\n\nIt can also handle transition animations for arrays in the format [number, number, number, number], allowing you to customize the transition curve.\n\n**duration**: number\n\nThe transition duration is specified in seconds.\n\n### spring\n\n```js\nanimate(0, 200, {\n  type: 'spring',\n  stiffness: 100,\n  damping: 10,\n  mass: 1,\n})\n```\n\n**stiffness**: number\n\nThe stiffness parameter defines the rigidity or intensity of the spring effect. A higher stiffness value will produce a more pronounced and rapid transition.\n\nThe default value is set to 100.\n\n**damping**: number\n\nThe damping parameter controls the resistance or smoothness of the spring's movement. A higher damping value will result in a slower and smoother transition, while a lower damping value will allow for more oscillations.\n\nThe default value is set to 10.\n\n**mass**: number\n\nThe mass parameter affects the inertia of the animation. A higher mass value results in slower acceleration and deceleration, creating a smoother and more gradual transition.\n\nThe default value is set to 1.\n\n## Lifecycles\n\nThe animation state will be updated through Lifecycles callbacks.\n\n```js\nanimate([0, 0], [200, 500], {\n  onPlay() {\n    // when the animation starts playing for the first time.\n  },\n  onUpdate([x, y]) {\n    // You can update DOM state or perform similar actions here\n    // every time the animation updates.\n    element.style.transform = `translate(${x}px,${y}px)`\n  },\n  onComplete() {\n    // when the animation completes its execution.\n    // If loop is set to true, it will be triggered after each iteration.\n  },\n  onStop() {\n    // When the animation is stopped\n  },\n})\n```\n\n## Controls\n\n```js\nconst animation = animate(0, 200)\n```\n\n**animation**: `thenable`\n\nA thenable object can be invoked using the then method, just like a Promise, and can also be used with await.\n\n```js\nawait animation\n\nconsole.log('animation end')\n```\n\n**animation.play**: `function`\n\n```js\nanimation.play()\n```\n\nIf autoplay is set to false, you need to call animation.play() to start the animation. When the animation is paused, calling play() will resume it. If the animation has ended or been canceled, calling play() will restart the animation.\n\n**animation.pause**: `funciton`\n\n```js\nanimation.pause()\n```\n\nPause the animation.\n\n**animation.stop**: `funciton`\n\n```js\nanimation.stop()\n```\n\nStop the animation.\n\n```js\nanimation.cancel()\n```\n\nCancel the animation, Unlike the stop() method, canceling the animation will pass the initial values to the onUpdate callback.\n\n## Special Note\n\nThe algorithm for the spring animation in this library is sourced from the renowned animation library, framer-motion. I have utilized its algorithm in the code for this library.\n\n## License\n\n[MIT License](https://github.com/zhangyu1818/from-to/blob/main/LICENSE)\n\n---\n\nMade with ❤️‍🩹 in Chengdu\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhangyu1818%2Ffrom-to","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzhangyu1818%2Ffrom-to","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhangyu1818%2Ffrom-to/lists"}