Vue and Nuxt Motion One

Package	Version	Downloads
Vue
Nuxt

A tiny, performant animation library for VueJS. Powered by Motion One.

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.

Contributing

Please read our contributing guide

Installation

Motion One for VueJS can be installed via npm:

npm install @oku-ui/motion
# or
pnpm add @oku-ui/motion
# or
yarn add @oku-ui/motion

Motion One for NuxtJS can be installed via npm:

npm install @oku-ui/motion-nuxt
# or
pnpm add @oku-ui/motion-nuxt
# or
yarn add @oku-ui/motion-nuxt

NuxtJS

Add @oku-ui/motion-nuxt to the modules section of nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    '@oku-ui/motion-nuxt',
  ],

  motion: {
    //  autoImportComponents?: boolean
    //  prefix?: string
  },
})

Create an animation

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

<script setup lang="ts">
import { Motion } from "@oku-ui/motion"
</script>

<template>
  <Motion />
</template>

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

<script setup lang="ts">
import { Motion } from "motion/vue"
</script>

<template>
  <Motion />
</template>

<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:

<script setup lang="ts">
import { Motion, Presence } from "motion/vue"

const show = ref(true)
</script>

<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>

<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"
/>