Components

vueuse/motion allows you to implement your animations directly within the template of your components without the need to wrap target elements in any additional components.

These components work similar to the directive v-motion usage but work better in projects using server-side rendering.

<Motion>

Example of a <Motion> component using a motion preset on a <p> element:

<template>
  <Motion is="p" preset="slideVisibleLeft">Text in Motion!</Motion>
</template>

<MotionGroup>

The <MotionGroup> can be used to apply motion configuration to all of its child elements, this component is renderless by default and can be used as a wrapper by passing a value to the :is prop.

<template>
  <MotionGroup preset="slideVisibleLeft" :duration="600">
    <section>
      <h3>Product 1</h3>
      <p>Description text</p>
    </section>
    <section>
      <h3>Product 2</h3>
      <p>Description text</p>
    </section>
    <section>
      <h3>Product 3</h3>
      <p>Description text</p>
    </section>
  </MotionGroup>
</template>

Props

The <Motion> and <MotionGroup> components allow you to define animation properties (variants) as props.

• is: What element should rendered (div by default for <Motion>).
• preset: Motion preset to use (expects camel-case string), see Presets.

Variant props

• initial: Properties the element will have before it is mounted.
• enter: Properties the element will have after it is mounted.
• visible: Properties the element will have whenever it is within view. Once out of view, the initial properties are reapplied.
• visible-once: Properties the element will have once it enters the view.
• hovered: Properties the element will have when hovered.
• focused: Properties the element will have when it receives focus.
• tapped: Properties the element will have upon being clicked or tapped.

Variants can be passed as an object using the :variants prop.

The :variants prop combines with other variant properties, allowing for the definition of custom variants from this object.

Additional variant properties can be explored on the Variants page.

Shorthand Props

We support shorthand props for quickly setting transition properties:

• delay
• duration

These properties apply to visible, visible-once, or enter variants if specified; otherwise, they default to the initial variant.

<template>
  <Motion
    :initial="{ opacity: 0, y: 100 }"
    :enter="{ opacity: 1, y: 0, scale: 1 }"
    :variants="{ custom: { scale: 2 } }"
    :hovered="{ scale: 1.2 }"
    :delay="200"
    :duration="1200"
  >
    Content to animate!
  </Motion>
</template>