<h1 align="center"> <img width="35" height="35" alt="Motion logo" src="https://github.com/user-attachments/assets/00d6d1c3-72c4-4c2f-a664-69da13182ffc" /><br />Motion for Vue</h1>
npm install motion-vMotion for Vue is an open source, production-ready library that’s designed for all creative developers.
It's the only animation library with a hybrid engine, combining the power of JavaScript animations with the performance of native browser APIs.
It looks like this:
``jsx`
It does all this:
- Springs
- Keyframes
- Layout animations
- Shared layout animations
- Gestures (drag/tap/hover)
- Scroll animations
- SVG paths
- Exit animations
- Server-side rendering
- Independent transforms
- Orchestrate animations across components
- CSS variables
...and a whole lot more.
Install motion-v via your package manager:
``
npm install motion-v
Then import the motion component:
`vue
`
Learn, Design, Build. Motion+ is a one-time fee, lifetime update membership that provides:
- 160+ premium Motion Examples
- Motion UI features like Cursor and Ticker
- Motion Studio animation editing for VS Code alpha`
- Early access content
- Private Discord
!Video of bezier curve editing
Motion Studio is a versatile suite of developer tools allowing you to:
- Visually edit CSS and Motion easing curves in VS Code
- Generate CSS springs with LLMs
- Load Motion docs into your LLM
Get started with Motion Studio.
- Want to contribute to Motion? Our contributing guide has you covered.
- Join our discord
- Motion for Vue is MIT licensed.
Motion is sustainable thanks to the kind support of its sponsors.
#### Framer
Motion powers Framer animations, the web builder for creative pros. Design and ship your dream site. Zero code, maximum speed.