{"id":17275131,"url":"https://github.com/gmrchk/kinet","last_synced_at":"2025-08-20T01:31:23.974Z","repository":{"id":32999869,"uuid":"149194328","full_name":"gmrchk/kinet","owner":"gmrchk","description":"Kind of a most lightweight animation library of all. Changes value with that spring effect, but keeps the rest to you.","archived":false,"fork":false,"pushed_at":"2022-12-04T12:36:36.000Z","size":413,"stargazers_count":93,"open_issues_count":11,"forks_count":11,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-12-09T19:53:27.249Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://gmrchk.github.io/kinet/","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/gmrchk.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-09-17T22:11:09.000Z","updated_at":"2024-12-05T21:25:46.000Z","dependencies_parsed_at":"2023-01-14T22:59:27.662Z","dependency_job_id":null,"html_url":"https://github.com/gmrchk/kinet","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmrchk%2Fkinet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmrchk%2Fkinet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmrchk%2Fkinet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmrchk%2Fkinet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gmrchk","download_url":"https://codeload.github.com/gmrchk/kinet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230382858,"owners_count":18216854,"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":[],"created_at":"2024-10-15T08:55:29.903Z","updated_at":"2024-12-19T05:07:28.632Z","avatar_url":"https://github.com/gmrchk.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Kinet\nKind of a most lightweight animation library of all. Kinet lets you animate with that spring effect so you can use the values wherever you need to.\n\n## Installation\nInclude Kinet with scripts tag\n\n```html\n\u003cscript src=\"./dist/kinet.min.js\"\u003e\u003c/script\u003e\n```\nor with *npm* and *import*\n```shell\nnpm install kinet --save\n```\n```javascript\n// import needed modules from npm\nimport Kinet from 'kinet';\n```\n\n## Options\nKinet accepts several options defined as follows.\n```javascript\nvar options = { option: \"value\" }\nvar kinet = new Kinet(options);\n```\n\n### friction\nRecommended value 0-1. Default value is `0.3`.\n\n### acceleration\nRecommended value 0-1. Default value is `0.04`.\n\n### initialValue\nSets the initial value of `current` and `target` variables in animated instances.\n\n### names\nArray of names (strings). Kinet creates animated instance for each name. Defaults to single `x` value in array.\n\n### test\nFunction testing whether the animation has finished. Function gets and animated instance as an argument. \nWhen test function returns false for all animated instances, Kinet stops the animation and sets values to target values.  \n\n```javascript\n// default value\ntest: function (instance) {\n    return Math.abs(instance.current - instance.target) \u003e 0.1;\n}\n```\n\n## Methods\n```javascript\nvar kinet = new Kinet({name: [\"x\", \"y\"]});\n```\n\n### set\nSets value of current and target of animated instance to required value without animating. \n```javascript\nvar kinet = new Kinet();\nkinet.set(\"x\", 10); // sets to number 10\n```\n\n### animate\nAnimates value of current variable of animated instance to target value without animating. \n```javascript\nvar kinet = new Kinet();\nkinet.animate(\"x\", 10); // animates to number 10\n```\n\n### on\nSets handler for event. Available events are `start` (called at start of animation), `end` (called at the end of animation) and `tick` (called for every tick of animation).\nTick is called with `requestAnimationFrame` as the `current` value progresses to `target` value.\n```javascript\n// init\nvar kinet = new Kinet();\n\n// set handler\nkinet.on('tick', function () {\n    // do something on every animation tick\n});\n```\n\n\n### off\nRemoves handler.\n```javascript\nkinet.off('tick', handler); // removes single handler\nkinet.off('tick'); // removes all handlers for 'tick' event\nkinet.off(); // removes all handlers\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgmrchk%2Fkinet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgmrchk%2Fkinet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgmrchk%2Fkinet/lists"}