Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/unovue/motion-vue
A animation library for Vue
https://github.com/unovue/motion-vue
animation framer-motion motion motion-vue vue
Last synced: 5 days ago
JSON representation
A animation library for Vue
- Host: GitHub
- URL: https://github.com/unovue/motion-vue
- Owner: unovue
- License: mit
- Created: 2024-11-15T01:38:01.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2025-01-31T08:52:10.000Z (11 days ago)
- Last Synced: 2025-01-31T09:30:56.162Z (11 days ago)
- Topics: animation, framer-motion, motion, motion-vue, vue
- Language: TypeScript
- Homepage: https://motion.unovue.com
- Size: 1.56 MB
- Stars: 1,038
- Watchers: 2
- Forks: 24
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
An animation library designed for Vue 3, powered by [Motion](https://www.framer.com/motion/).
## Features
- ✨ Declarative animation API for intuitive control
- 👋 Gesture-driven animations for interactive experiences
- ⚙ Motion values for dynamic animations
- 🔲 Layout animations and transitions
- 🚪 Polished enter/exit animations
- 📜 Smooth scroll-based animations and effects
## 🏎️ Quick Start
To install `motion-v`, run the following command:
```bash
npm install motion-v
```
## Basic Usage
Here is a basic example of how to use `motion-v` in your Vue 3 project:
```vue
import { Motion } from 'motion-v'
```
### Advanced Usage
For more advanced usage, you can combine multiple animations and gestures:
```vue
import { Motion } from 'motion-v'
import { ref } from 'vue'
const isVisible = ref(true)
```
In this example, the `Motion` component will fade in and move to the right when it appears, and fade out and move to the left when it disappears. Clicking the component will toggle its visibility.
For detailed documentation, please refer to the [full documentation](https://motion.seacoly.me/).
## Contributing
We welcome contributions from the community. Please refer to the [CONTRIBUTING.md](./CONTRIBUTING.md) file for guidelines on how to contribute to this project. Your contributions are invaluable in helping us improve and grow.