{"id":13406235,"url":"https://github.com/vueuse/motion","last_synced_at":"2025-05-12T13:24:54.728Z","repository":{"id":38402434,"uuid":"331093920","full_name":"vueuse/motion","owner":"vueuse","description":"🤹 Vue Composables putting your components in motion","archived":false,"fork":false,"pushed_at":"2025-03-11T08:04:13.000Z","size":2458,"stargazers_count":2608,"open_issues_count":48,"forks_count":93,"subscribers_count":14,"default_branch":"main","last_synced_at":"2025-05-06T00:38:13.941Z","etag":null,"topics":["composable","composition-api","motion","popmotion","popmotion-for-vue","spring","vue"],"latest_commit_sha":null,"homepage":"https://motion.vueuse.org","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/vueuse.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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,"zenodo":null},"funding":{"github":["Tahul"]}},"created_at":"2021-01-19T19:57:24.000Z","updated_at":"2025-05-05T22:10:18.000Z","dependencies_parsed_at":"2023-10-04T21:26:53.396Z","dependency_job_id":"98e0950b-1f50-43b0-969c-f0dc51d656fc","html_url":"https://github.com/vueuse/motion","commit_stats":{"total_commits":926,"total_committers":36,"mean_commits":25.72222222222222,"dds":0.09071274298056153,"last_synced_commit":"12d1020bef029ab62f90c401e506334263187f65"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vueuse%2Fmotion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vueuse%2Fmotion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vueuse%2Fmotion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vueuse%2Fmotion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vueuse","download_url":"https://codeload.github.com/vueuse/motion/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253746001,"owners_count":21957482,"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":["composable","composition-api","motion","popmotion","popmotion-for-vue","spring","vue"],"created_at":"2024-07-30T19:02:24.843Z","updated_at":"2025-05-12T13:24:54.669Z","avatar_url":"https://github.com/vueuse.png","language":"TypeScript","readme":"# 🤹 @vueuse/motion\n\n[![npm](https://img.shields.io/npm/v/@vueuse/motion.svg)](https://www.npmjs.com/package/@vueuse/motion)\n[![npm](https://img.shields.io/npm/v/vueuse-motion-nightly.svg)](https://www.npmjs.com/package/vueuse-motion-nightly)\n[![npm](https://img.shields.io/npm/dm/@vueuse/motion.svg)](https://npm-stat.com/charts.html?package=@vueuse/motion)\n[![minzip size](https://img.shields.io/bundlephobia/minzip/%40vueuse%2Fmotion/3)](https://www.npmjs.com/package/@vueuse/motion)\n[![Netlify Status](https://api.netlify.com/api/v1/badges/ab1db459-8420-4bc6-9fac-2bc247fa2385/deploy-status)](https://app.netlify.com/sites/vueuse-motion/deploys)\n\nVue Composables putting your components in motion\n\n- 🏎 **Smooth animations** based on [Popmotion](https://popmotion.io/)\n- 🎮 **Declarative** API inspired by [Framer Motion](https://www.framer.com/motion/)\n- 🚀 **Plug** \u0026 **play** with **20+ presets**\n- 🌐 **SSR Ready**\n- 🚚 First-class support for **Nuxt 3**\n- ✨ Written in **TypeScript**\n- 🏋️‍♀️ Lightweight with **\u003c25kb** bundle size\n\n[🌍 Documentation](https://motion.vueuse.org)\n\n[👀 Demos](https://vueuse-motion-demo.netlify.app)\n\n## Quick Start\n\nLet's get started by installing the package and adding the plugin.\n\nFrom your terminal:\n\n```bash\nnpm install @vueuse/motion\n```\n\nIn your Vue app entry file:\n\n```javascript\nimport { createApp } from \"vue\";\nimport { MotionPlugin } from \"@vueuse/motion\";\nimport App from \"./App.vue\";\n\nconst app = createApp(App);\n\napp.use(MotionPlugin);\n\napp.mount(\"#app\");\n```\n\nYou can now animate any of your component, HTML or SVG elements using `v-motion`.\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\n    v-motion\n    :initial=\"{\n      opacity: 0,\n      y: 100,\n    }\"\n    :enter=\"{\n      opacity: 1,\n      y: 0,\n    }\"\n  /\u003e\n\u003c/template\u003e\n```\n\nTo see more about how to use directives, check out [Directive Usage](https://motion.vueuse.org/features/directive-usage).\n\nTo see more about what properties you can animate, check out [Motion Properties](https://motion.vueuse.org/features/motion-properties).\n\nTo see more about how to create your own animation styles, check out [Transition Properties](https://motion.vueuse.org/features/transition-properties).\n\nTo see more about what are variants and how you can use them, check out [Variants](https://motion.vueuse.org/features/variants).\n\nTo see more about how to control your declared variants, check out [Motion Instance](https://motion.vueuse.org/features/motion-instance).\n\n## Nightly release channel\n\nYou can try out the latest changes before a stable release by installing the nightly release channel.\n\n```bash\nnpm install @vueuse/motion@npm:vueuse-motion-nightly\n```\n\n## Credits\n\nThis package is heavily inspired by [Framer Motion](https://www.framer.com/motion/) by [@mattgperry](https://twitter.com/mattgperry).\n\nIf you are interested in using [WAAPI](https://developer.mozilla.org/fr/docs/Web/API/Web_Animations_API), check out [Motion.dev](https://motion.dev/)!\n\nI would also like to thank [antfu](https://github.com/antfu), [patak-dev](https://github.com/patak-dev) and [kazupon](https://github.com/kazupon) for their kind help!\n\nIf you like this package, consider following me on [GitHub](https://github.com/Tahul) and on [Twitter](https://twitter.com/yaeeelglx).\n\n👋\n","funding_links":["https://github.com/sponsors/Tahul"],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvueuse%2Fmotion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvueuse%2Fmotion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvueuse%2Fmotion/lists"}