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

Get Motion+

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.