{"id":20180406,"url":"https://github.com/brunnolou/keyframe","last_synced_at":"2025-09-01T04:36:29.232Z","repository":{"id":73656598,"uuid":"86697578","full_name":"brunnolou/keyframe","owner":"brunnolou","description":"A simple keyframe utility for custom animation","archived":false,"fork":false,"pushed_at":"2018-02-16T20:33:19.000Z","size":98,"stargazers_count":16,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-23T17:52:45.473Z","etag":null,"topics":["animation","keyframes","timeline"],"latest_commit_sha":null,"homepage":"https://brunnolou.github.io/keyframe/","language":"JavaScript","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/brunnolou.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2017-03-30T11:59:58.000Z","updated_at":"2024-06-21T13:02:58.965Z","dependencies_parsed_at":null,"dependency_job_id":"be376baf-c748-4a5c-98e3-c3a31b5f35e4","html_url":"https://github.com/brunnolou/keyframe","commit_stats":{"total_commits":19,"total_committers":2,"mean_commits":9.5,"dds":"0.052631578947368474","last_synced_commit":"da7c03043681f5c168e9089acc6f3bc0cf5bd6b4"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunnolou%2Fkeyframe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunnolou%2Fkeyframe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunnolou%2Fkeyframe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunnolou%2Fkeyframe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brunnolou","download_url":"https://codeload.github.com/brunnolou/keyframe/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248161255,"owners_count":21057553,"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","keyframes","timeline"],"created_at":"2024-11-14T02:30:40.915Z","updated_at":"2025-04-10T04:54:04.351Z","avatar_url":"https://github.com/brunnolou.png","language":"JavaScript","readme":"# Keyframe\n\n### A simple tiny keyframe utility for custom animation.\n[![npm version](https://badge.fury.io/js/keyframe.svg?v2)](https://badge.fury.io/js/keyframe)\n![0 dependencies](https://david-dm.org/brunnolou/keyframe.svg)\n![](https://img.shields.io/github/size/brunnolou/keyframe/lib/index.min.js.svg)\n\n\n## Install\n`npm install --save keyframe`\n\nor\n\n`yarn add keyframe`\n\n## Usage\nPass an object witch every key is the keyframe from `0` to `100`.\n\nEach keyframe is a function that will be called during the keyframe interval. Each passed function is **cached** and **runs only once** when the value is the same.\n\nAnd will return a function to run through the keyframes progress.\n\n```js\nconst run = keyframe({\n  50: (d) =\u003e update(d),\n  100: (d) =\u003e update(d),\n});\n\nrun(0);    // 0\nrun(0.25); // 0.5\nrun(0.5);  // 1\nrun(0.75); // 0.5\nrun(1);    // 1\n```\n\n## Example\n```js\nimport keyframe from 'keyframe';\n\n...\n\nconst moveTo = (x, y) =\u003e {\n  div.style.transform = `translate(${x}px, ${y}px)`;\n};\n\n// From (0% -\u003e 50%) move the div left 150px\n// then from (50% -\u003e 100%) move the div up 50px.\nconst onSliderUpdate = keyframe({\n  // d is the duration between 0% -\u003e 50%.\n  50: d =\u003e moveTo(d * 150, 0),\n\n  // d is the duration between 50% -\u003e 100%.\n  100: d =\u003e moveTo(150, d * -50),\n});\n\n// Return range between 0 and 1.\nDOMslider.addEventListener('input', () =\u003e onSliderUpdate(slider.value / 100), true);\n\n```\n\nCheck the `examples/` folder to see full examples.\n\nOr check out the [DEMO](https://brunnolou.github.io/keyframe/) page\n\n[![](https://i.giphy.com/xT39D7ALjvyjoqLU0U.gif)](https://brunnolou.github.io/keyframe/)\n\n\n## Development\n`yarn install`\n\n`yarn run dev`\n\n## Test\n`yarn test`\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrunnolou%2Fkeyframe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrunnolou%2Fkeyframe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrunnolou%2Fkeyframe/lists"}