Motion

The Motion component is the primary building block for animations in Motion for Vue. It can be rendered as any HTML or SVG element by using the as prop, such as <Motion as="div"/> or <Motion as="circle"/>. Alternatively, you can pass asChild to render a child component directly.

Import

import { Motion } from 'motion-v'

  <Motion
    as="div"
    class="w-10 h-10 bg-primary rounded-lg"
    :initial="{
      opacity:0
    }"
    :animate="{
      opacity:1
    }"
  />

Basic Usage

Keyframes

Set a value as an array and Motion will animate through each of these values in turn.

By default, each keyframe will be spaced evenly throughout the animation, but the exact timing and easing can be configured via the transition property.

Variants

Variants are pre-defined visual states that a component can be in. By giving a component and its children variants with matching names, whole Vue trees can be animated by changing a single prop.

Gestures Animation

Motion provides hover, press helper props, that will temporarily animate a component to a visual state while a gesture is active.

Like animate, these can either be set as an object of properties (each with their own transition prop), or the name of a variant.

NameSpace

Motion provides a namespace for each HTML and SVG element, similar to motion/react. This allows you to use elements directly without the as prop:

<script setup lang="ts">
import { motion } from 'motion-v'
</script>

<template>
  <motion.div
    :initial="{ opacity: 0 }"
    :animate="{ opacity: 1 }"
  />
</template>

for Component, You can also use motion.create to create a motion Component of any custom component:

<script setup lang="ts">
import { motion } from 'motion-v'
import Component from './Component.vue'

const MotionComponent = motion.create(Component)
</script>

<template>
  <MotionComponent
    :initial="{ opacity: 0 }"
    :animate="{ opacity: 1 }"
  />
</template>

InView

The inView prop to set a component to animate when it enters the viewport.

Props

initial

The initial visual state of the Motion component.

This can be set as an animation target:

<Motion
  :initial="{
    opacity:0,x:0
  }"
/>

or set a string to target a variant:

<Motion
  initial="variantName"
  :variants="{
    variantName: {
      opacity:0,x:0
    }
  }"
/>

or set false to disable the initial animation:

<Motion
  :initial="false"
/>

animate

the animate prop is used to set the animation target. When the component is mounted or the animate prop is updated, it will animate to the animate target.

<Motion
  :animate="{
    opacity:1,x:100
  }"
/>

or set a string to target a variant:

<Motion
  animate="variantName"
  :variants="{
    variantName: {
      opacity:1,x:100
    }
  }"
/>

custom

The custom prop is used to pass through to dynamic variants.

transition

The transition prop is used to set the transition of the animation.

<Motion
  :initial="{ x: 0, opacity: 0 }"
  :animate="{ x: 100, opacity: 1 }"
  :transition="{
    duration: 1,
    x: { type: 'spring', stiffness: 260, damping: 20 },
  }"
/>

inViewOptions

The inViewOptions prop is used to set the options for the inView prop.

<Motion
  :in-view-options="{
    once: true,
  }"
/>

margin

Default: 0

The margin option allows you to set the margin around the component that should be in view for the animation to trigger.

<Motion
  :in-view="{ x: 0 }"
  :in-view-options="{ margin: 100 }"
/>

once

Default: false

The once option allows you to set the animation to trigger only once when the component enters the viewport.

<Motion
  :in-view="{ x: 0 }"
  :in-view-options="{ once: true }"
/>

root

The root option allows you to set the root element that the inView animation should be relative to.

<Motion
  :in-view="{ x: 0 }"
  :in-view-options="{ root: '#root' }"
/>

amount

Default: some

The amount option allows you to set the amount of the component that should be in view for the animation to trigger.

You can set the amount to all, which means the animation will trigger when the entire component is in view.

or you can set a number, which means the animation will trigger when the component is in view by the amount of the component that is in view.

<Motion
  :in-view="{ x: 0 }"
  :in-view-options="{ amount: 'all' }"
/>

as

The as prop allows you to set the HTML or SVG element that the Motion component should be rendered as.

<Motion
  as="div"
  class="w-10 h-10 bg-primary rounded-lg"
/>

asChild

The asChild prop allows you to render a child component directly.

<Motion
  as-child
>
  <ChildComponent />
</Motion>