{"id":14961263,"url":"https://github.com/animotionjs/motion","last_synced_at":"2025-05-11T08:55:37.443Z","repository":{"id":206418900,"uuid":"716596820","full_name":"animotionjs/motion","owner":"animotionjs","description":"🔥 Svelte animation library","archived":false,"fork":false,"pushed_at":"2025-01-22T10:53:56.000Z","size":216,"stargazers_count":47,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-11T08:55:31.395Z","etag":null,"topics":["animation","library","motion","svelte","sveltekit"],"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/animotionjs.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-09T13:23:27.000Z","updated_at":"2025-04-22T21:30:10.000Z","dependencies_parsed_at":null,"dependency_job_id":"5ddf8294-3af0-4d5f-8c90-cc42d994a47a","html_url":"https://github.com/animotionjs/motion","commit_stats":{"total_commits":26,"total_committers":2,"mean_commits":13.0,"dds":"0.34615384615384615","last_synced_commit":"a22a074e264311ffdf84101ddca00d60647c43b1"},"previous_names":["animotionjs/motion"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/animotionjs%2Fmotion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/animotionjs%2Fmotion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/animotionjs%2Fmotion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/animotionjs%2Fmotion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/animotionjs","download_url":"https://codeload.github.com/animotionjs/motion/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253540737,"owners_count":21924534,"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","library","motion","svelte","sveltekit"],"created_at":"2024-09-24T13:24:17.747Z","updated_at":"2025-05-11T08:55:37.386Z","avatar_url":"https://github.com/animotionjs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Motion\n\nhttps://github.com/animotionjs/motion/assets/38083522/7cd87b1b-016f-46d3-b2c9-67e849d4559f\n\n## What Is Motion?\n\nMotion is a simple Svelte animation library. Instead of being limited to animating CSS properties using a JavaScript animation library, or the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API), it uses values that change over time, to animate any property.\n\n## Installation\n\n```sh\nnpm i @animotion/motion\n```\n\n## Methods\n\n- `tween` is the value over time which can be a single value, such as `tween(0)`, or an object `tween({ count: 0 })`\n- `reset` is a helper function to reset the animation to its default values\n\n## Usage\n\n- `to` method is used to animate values\n- `sfx` method is used to play sounds\n- `tween` and `to` method accept an options object for `duration`, `delay`, and `easing`\n- `await` keyword can be used to wait for animations to finish\n\n## Example\n\n```svelte\n\u003cscript\u003e\n\timport { tween } from '@animotion/motion'\n\n\tconst sfx = {\n\t\ttransition: 'sfx/transition.mp3',\n\t\ttally: 'sfx/tally.mp3',\n\t}\n\n\tconst camera = tween({ x: -2, y: -2, w: 24, h: 24 })\n\tconst circle = tween({ x: 2.5, y: 2.5, r: 1.5, fill: '#00ffff' })\n\tconst text = tween({ count: 0, opacity: 0 })\n\n\tasync function animate() {\n\t\tawait camera.sfx(sfx.transition).to({ x: 0, y: 0, w: 10, h: 10 })\n\t\tcircle.sfx(sfx.transition).to({ x: 10, y: 10, r: 3, fill: '#ffff00' })\n\t\tcamera.to({ x: 5, y: 5 })\n\t\tawait text.to({ opacity: 1 }, { duration: 300 })\n\t\ttext.sfx(sfx.tally).to({ count: 10_000 }, { duration: 600 })\n\t}\n\u003c/script\u003e\n\n\u003csvg viewBox=\"{camera.x} {camera.y} {camera.w} {camera.h}\"\u003e\n\t{@render grid()}\n\n\t\u003ccircle cx={circle.x} cy={circle.y} r={circle.r} fill={circle.fill} /\u003e\n\n\t\u003ctext\n\t\tx={circle.x}\n\t\ty={circle.y}\n\t\tfont-size={circle.r * 0.4}\n\t\topacity={text.opacity}\n\t\ttext-anchor=\"middle\"\n\t\tdominant-baseline=\"middle\"\n\t\tfill=\"#000\"\n\t\u003e\n\t\t{text.count}\n\t\u003c/text\u003e\n\u003c/svg\u003e\n\n\u003cbutton onclick={animate}\u003eAnimate\u003c/button\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanimotionjs%2Fmotion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanimotionjs%2Fmotion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanimotionjs%2Fmotion/lists"}