Quick start

Contents

  1. Introduction
  2. Install
  3. Create an animation
  4. Transition options
  5. Keyframes
  6. Enter animations
  7. Exit animations
  8. More to discover

Introduction

Motion One for Vue is a 5kb animation library for Vue 3. Built on Motion One, it's capable of springs, independent transforms, and hardware accelerated animations.

By the end of this quick guide, you'll have installed Motion One for Vue and created your first animation.

Install

Motion One can be installed via npm:

npm install motion

Alternatively, all the examples on this page are editable, so you can play around with them in-browser and fork them to CodeSandbox.

Create an animation

Import the Motion component and register it in your Vue component:

import { Motion } from "motion/vue"

export default {
  components: { Motion },
}

The Motion component can be used to create an animatable HTML or SVG element. By default, it will render a div element:

<template>
  <Motion />
</template>

<script>
import { Motion } from "motion/vue"

export default {
  components: { Motion }
}
</script>

<style scoped>
div {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background-color: var(--splash);
}
</style>

Edit the above example by adding an animate prop:

<Motion :animate="{ rotate: 90, backgroundColor: 'var(--yellow)' }" />

Every time a value in animate changes, perhaps from component data or props, the component will automatically animate to the latest values.

Transition options

We can change the type of animation used by passing a transition prop.

<Motion
  :animate="{ rotate: 90, backgroundColor: 'var(--yellow)' }"
  :transition="{ duration: 1, easing: 'ease-in-out' }"
/>

By default transition options are applied to all values, but we can also override on a per-value basis:

<Motion
  :animate="{ rotate: 90, backgroundColor: 'var(--yellow)' }"
  :transition="{
    duration: 1,
    rotate: { duration: 2 },
  }"
/>

Keyframes

Values can also be set as arrays, to define a series of keyframes.

<Motion :animate="{ x: [0, 100, 50] }" />

By default, keyframes are spaced evenly throughout duration, but this can be adjusted by providing progress values to offset:

<Motion
  :animate="{ x: [0, 100, 50] }"
  :transition="{ x: { offset: [0, 0.25, 1] } }"
/>

Enter animations

Elements will automatically animate to the values defined in animate when they're created.

This can be disabled by setting the initial prop to false. The styles defined in animate will be applied immediately when the element is first created.

<Motion :initial="false" :animate="{ x: 100 }" />

Exit animations

When an element is removed with v-show or v-if it can be animated out with the Presence component and the exit prop:

<template>
  <div class="container">
    <Presence>
      <Motion
        v-show="show"
        :initial="{ opacity: 0, scale: 0 }"
        :animate="{ opacity: 1, scale: 1 }"
        :exit="{ opacity: 0, scale: 0.6 }"
        class="box"
      />
    </Presence>
    <button @click="show = !show">
      Toggle
    </button>
  </div>
</template>

<script>
import { Motion, Presence } from "motion/vue"

export default {
  components: { Motion, Presence },
  data() {
    return { show: true }
  }
}
</script>

<style>
.container {
  width: 100px;
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.container button {
  cursor: pointer;
}
.box {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background-color: var(--splash);
}
</style>

exit can be provided a transition of its own, that override the component's transition:

<Motion
  v-show="isVisible"
  :animate="{ opacity: 1 }"
  :exit="{ opacity: 0, transition: { duration: 0.8 } }"
  :transition="transition"
/>

More to discover

This guide has covered the basics of animation in Motion One for Vue, but the Motion and Presence components offer more options to customise your animations.

For inspiration, check out our examples page.