Get started with Motion for Vue

Motion for Vue is a simple yet limitless animation library. It's the only animation library with a hybrid engine, capable of hardware accelerated animations.

In this guide, we'll learn how to install Motion Vue and take a whirlwind tour of its main features.

Install

Motion is available via npm:

Nuxt modules

Motion Vue offers Nuxt modules support.

In nuxt.config.ts, simply add motion-v/nuxt into the modules, and it will auto-imports all the components for you.

unplugin-vue-components

Motion for Vue also supports unplugin-vue-components to auto-import all components from motion-v:

Note: Auto-import currently doesn't support the <motion /> component so you'll need to import it manually.

Note: Motion for Vue contains APIs specifically tailored for Vue, but every feature from vanilla Motion is also compatible and available for advanced use-cases.

Usage

The core of Motion for Vue is the <motion /> component. It's a normal DOM element, supercharged with animation capabilities.

<template>
  <motion.div />
</template>

Animating a motion component is as straightforward as setting values via the animate prop:

<motion.ul :animate="{ rotate: 360 }" />

When values in animate change, the component will animate. Motion has great-feeling defaults, but animations can of course be configured via the transition prop.

<motion.div
  :animate="{
    scale: 2,
    transition: { duration: 2 }
  }"
/>

Enter animation

When a component enters the page, it will automatically animate from the rendered value, but you can provide different values via the initial prop.

<motion.button :initial="{ scale: 0 }" :animate="{ scale: 1 }" />

Or disable this initial animation entirely by setting initial to false.

<motion.button :initial="false" :animate="{ scale: 1 }" />

Gestures

<motion /> extends Vue's event system with powerful gesture recognises. It currently supports hover, press, focus, and drag gestures.

<motion.button
  :whileHover="{ scale: 1.1 }"
  :whilePress="{ scale: 0.95 }"
  @hoverStart="() => console.log('hover started!')"
/>

Motion's gestures are designed to feel better than using CSS alone. For instance, hover events are correctly not triggered by touch screen taps. Learn more about gestures.

Scroll animations

Motion supports both types of scroll animations, scroll-triggered and scroll-linked.

To trigger an animation on scroll, the whileInView prop defines a state to animate to/from when an element enters/leaves the viewport:

<motion.div
  :initial="{ backgroundColor: 'rgb(0, 255, 0)', opacity: 0 }"
  :whileInView="{ backgroundColor: 'rgb(255, 0, 0)', opacity: 1 }"
/>

Whereas to link a value directly to scroll position, it's possible to use MotionValues via useScroll.

<script setup >
  const { scrollYProgress } = useScroll()
</script>

<template>
  <motion.div :style="{ scaleX: scrollYProgress }" />
</template>

Learn more about Motion's scroll animations.

Layout animations

Motion has an industry-leading layout animation engine that supports animating between changes in layout, using only transforms, between the same or different elements, with full scale correction.

It's as easy as applying the layout prop.

<motion.div layout />

Or to animate between different elements, a layoutId:

<motion.div layoutId="underline" />

Learn more about layout animations.

Exit animations

By wrapping motion components with <AnimatePresence> we gain access to the exit prop.

<AnimatePresence>
  <motion.div v-if="show" key="box" :exit="{ opacity: 0 }" />
</AnimatePresence>

Learn more about AnimatePresence.

Learn next

That's a very quick overview of Motion for Vue's basic features. But there's a lot more to learn!

Next, we recommend diving further into the the <motion /> component to learn more about its powerful features, like variants.

Or, you can dive straight in to our examples, where each example comes complete with full source code that you can copy/paste into your project.