Motion 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:
<motion.div :animate="{ x: 100 }" />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:
<script setup>
import { motion } from 'motion-v'
</script>
<template>
<motion.div :animate="{ x: 100 }" />
</template>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
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.