Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vueuse/motion
🤹 Vue Composables putting your components in motion
https://github.com/vueuse/motion
composable composition-api motion popmotion popmotion-for-vue spring vue
Last synced: 7 days ago
JSON representation
🤹 Vue Composables putting your components in motion
- Host: GitHub
- URL: https://github.com/vueuse/motion
- Owner: vueuse
- License: mit
- Created: 2021-01-19T19:57:24.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-04-26T12:35:06.000Z (6 months ago)
- Last Synced: 2024-05-01T14:54:12.330Z (6 months ago)
- Topics: composable, composition-api, motion, popmotion, popmotion-for-vue, spring, vue
- Language: TypeScript
- Homepage: https://motion.vueuse.org
- Size: 2.08 MB
- Stars: 2,061
- Watchers: 15
- Forks: 73
- Open Issues: 29
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- stars - vueuse/motion - 🤹 Vue Composables putting your components in motion (TypeScript)
- awesome - vueuse/motion - 🤹 Vue Composables putting your components in motion (TypeScript)
README
# 🤹 @vueuse/motion
[](https://www.npmjs.com/package/@vueuse/motion)
[](https://www.npmjs.com/package/vueuse-motion-nightly)
[](https://npm-stat.com/charts.html?package=@vueuse/motion)
[](https://app.netlify.com/sites/vueuse-motion/deploys)
Vue Composables putting your components in motion
- 🏎 **Smooth animations** based on [Popmotion](https://popmotion.io/)
- 🎮 **Declarative** API inspired by [Framer Motion](https://www.framer.com/motion/)
- 🚀 **Plug** & **play** with **20+ presets**
- 🌐 **SSR Ready**
- 🚚 First-class support for **Nuxt 3**
- ✨ Written in **TypeScript**
- 🏋️♀️ Lightweight with **<20kb** bundle size
[🌍 Documentation](https://motion.vueuse.org)
[👀 Demos](https://vueuse-motion-demo.netlify.app)
## Quick Start
Let's get started by installing the package and adding the plugin.
From your terminal:
```bash
npm install @vueuse/motion
```
In your Vue app entry file:
```javascript
import { createApp } from 'vue'
import { MotionPlugin } from '@vueuse/motion'
import App from './App.vue'
const app = createApp(App)
app.use(MotionPlugin)
app.mount('#app')
```
You can now animate any of your component, HTML or SVG elements using `v-motion`.
```vue
```
To see more about how to use directives, check out [Directive Usage](https://motion.vueuse.org/features/directive-usage).
To see more about what properties you can animate, check out [Motion Properties](https://motion.vueuse.org/features/motion-properties).
To see more about how to create your own animation styles, check out [Transition Properties](https://motion.vueuse.org/features/transition-properties).
To see more about what are variants and how you can use them, check out [Variants](https://motion.vueuse.org/features/variants).
To see more about how to control your declared variants, check out [Motion Instance](https://motion.vueuse.org/features/motion-instance).
## Nightly release channel
You can try out the latest changes before a stable release by installing the nightly release channel.
```bash
npm install @vueuse/motion@npm:vueuse-motion-nightly
```
## Credits
This package is heavily inspired by [Framer Motion](https://www.framer.com/motion/) by [@mattgperry](https://twitter.com/mattgperry).
If you are interested in using [WAAPI](https://developer.mozilla.org/fr/docs/Web/API/Web_Animations_API), check out [Motion.dev](https://motion.dev/)!
I 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!
If you like this package, consider following me on [GitHub](https://github.com/Tahul) and on [Twitter](https://twitter.com/yaeeelglx).
👋