Motion Vue

Gesture

Motion provides a set of gesture controls that allow you to create interactive animations.

Motion provides a set of gesture controls that allow you to create interactive animations.

Drag

The Drag gesture control allows you to drag an element.

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

<template>
  <Motion
    :drag="true"
    class="w-[100px] h-[100px] bg-[#dd00ee] rounded-lg"
  />
</template>

Drag with constraints

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

const constraintsRef = ref<HTMLDivElement>()
</script>

<template>
  <div
    ref="constraintsRef"
    class="w-[300px] h-[300px] bg-[#dd00ee]/25 rounded-lg"
  >
    <Motion
      :drag="true"
      :drag-constraints="constraintsRef"
      class="w-[100px] h-[100px] bg-[#dd00ee] rounded-lg"
    />
  </div>
</template>
LayoutGroup
like LayoutGroup in framer-motion, the LayoutGroup will detect the layout changes of its children and apply the layout animations.
Layout