Motion for Vue

https://motion.dev/docs/vue/
Admin
Motion for Vue is a production-ready animation library with a hybrid engine that provides...
Tokens:34,458
Snippets:523
Trust Score:9.7
Update:4 months ago
Show doc for...
Tokens:
Raw
### Basic useMotionValueEvent Setup

Source: https://motion.dev/docs/vue-use-motion-value-event

This example demonstrates the basic setup for useMotionValueEvent, subscribing to 'animationStart' and 'change' events on a motion value 'x'. Event handlers are automatically cleaned up on component unmount.

```vue
<script setup>
  import { useMotionValue, useMotionValueEvent } from "motion-v"
  const x = useMotionValue(0)
  
  useMotionValueEvent(x, "animationStart", () => {
    console.log("animation started on x")
  })
  
  useMotionValueEvent(x, "change", (latest) => {
    console.log("x changed to", latest)
  })
</script>

<template>
   <motion.div :style="{ x }" />
</template>
```

--------------------------------

### Basic useScroll Setup

Source: https://motion.dev/docs/vue-use-scroll

Import and use useScroll to get scrollYProgress for animating an element's scale.

```vue
<script setup>
  const { scrollYProgress } = useScroll()
</script>

<template>
 <motion.div :style="{ scaleX: scrollYProgress }" />  
</template>
```

--------------------------------

### Basic useAnimate Setup

Source: https://motion.dev/docs/vue-use-animate

Demonstrates the basic setup of useAnimate, including importing the hook, defining the scope and animate function, and using animate within onMounted to control child elements.

```vue
<script setup>
import { useAnimate } from 'motion-v'

const [scope, animate] = useAnimate()

onMounted(() => {
  // This "li" selector will only select children
  // of the element that receives `scope`
  animate('li', { opacity: 1 })
})
</script>

<template>
  <ul ref="scope">
    <slot />
  </ul>
</template>
```

--------------------------------

### Basic useVelocity Example

Source: https://motion.dev/docs/vue-use-velocity

This example demonstrates how to use useVelocity to get the velocity of a draggable motion value and use it to transform the scale.

```vue
<script setup>
const x = useMotionValue(0)
const xVelocity = useVelocity(x)
const scale = useTransform(
  xVelocity,
  [-3000, 0, 3000],
  [2, 1, 2],
  { clamp: false }
)
</script>

<template>
  <Motion drag="x" :style="{ x, scale }" />
</template>
```

--------------------------------

### Install Motion for Vue

Source: https://motion.dev/docs/vue

Install the Motion for Vue library using npm.

```bash
npm install motion-v
```

--------------------------------

### CSS for spring transition

Source: https://motion.dev/docs/vue-use-spring

Example CSS demonstrating a transition with a spring ease curve.

```css
1.card {
  transition: scale 200ms linear(3    0, 0.009, 0.036, 0.084, 0.157, 0.255, 0.378,
    0.522, 0.679, 0.832, 0.954, 1.029, 1.052, 1.038,
    1.011, 0.99, 0.984, 0.991, 1.001, 1.005, 1
  );
}
.card:hover {
  scale: 1.2;
}

```

--------------------------------

### Basic useMotionTemplate Example

Source: https://motion.dev/docs/vue-use-motion-template

Demonstrates the basic usage of useMotionTemplate to create a transform string from a motion value.

```javascript
const x = useMotionValue(100)
const transform = useMotionTemplate`transform(${x}px)`
```

--------------------------------

### onPressStart

Source: https://motion.dev/docs/vue-motion-component

Callback function that fires when a pointer starts pressing the component. Receives the triggering `PointerEvent`.

```APIDOC
## `onPressStart`

### Description
Callback function that fires when a pointer starts pressing the component. Provided the triggering `PointerEvent`.

### Usage
```html
<motion.div @pressStart="(event) => console.log(event)" />
```
```

--------------------------------

### Basic useInView Setup

Source: https://motion.dev/docs/vue-use-in-view

Import and use the useInView hook to track an element's visibility. Pass a ref to the hook and the element.

```javascript
import { useInView } from 'motion-v'

const domRef = ref()
const isInView = useInView(domRef)
```

```html
<div ref="domRef" />
```

--------------------------------

### Tracking Element Visibility with useInView

Source: https://motion.dev/docs/vue-use-in-view

A basic example showing how to use useInView with a ref to track an element's presence in the viewport.

```javascript
import { useInView } from 'motion-v'

const domRef = ref()
const isInView = useInView(ref)
```

```html
<div ref="domRef" />
```

--------------------------------

### Basic Reorder List Example

Source: https://motion.dev/docs/vue-reorder

Demonstrates a simple drag-to-reorder list using Reorder.Group and Reorder.Item. Ensure 'motion-v' is imported.

```vue
<script setup>
  import { Reorder } from "motion-v"
  const items = ref([0,1,2,3])
</script>

<template>
  <Reorder.Group axis="y" v-model:values="items">
      <Reorder.Item v-for="item in items" :key="item" :value="item">
        {{item}}
      </Reorder.Item>
  </Reorder.Group>
</template>
```

--------------------------------

### Logging Velocity Changes

Source: https://motion.dev/docs/vue-use-velocity

This example shows how to use useVelocity to get the velocity of a motion value and log its changes using useMotionValueEvent.

```vue
<script setup>
import { useMotionValue, useVelocity, useMotionValueEvent } from 'motion-v'

const x = useMotionValue(0)
const xVelocity = useVelocity(x)

useMotionValueEvent(xVelocity, 'change', (latest) => {
  console.log('Velocity', latest)
})
</script>

<template>
  <Motion :style="{ x }" />
</template>
```

--------------------------------

### onAnimationStart

Source: https://motion.dev/docs/vue-motion-component

Callback triggered when an animation starts. Receives the target or variant name of the animation as an argument.

```APIDOC
## `onAnimationStart`

### Description
Callback triggered when any animation (except layout animations, see `onLayoutAnimationStart`) starts.
It's provided a single argument, with the target or variant name of the started animation.

### Usage
```html
<motion.circle
  :animate="{ r: 10 }"
  @animationStart="latest => console.log(latest.r)"
/>
```
```

--------------------------------

### Implement hover and press gestures

Source: https://motion.dev/docs/vue

Utilize Motion's gesture recognizers for interactive elements. This example scales a button up on hover and down on press, and logs a message on hover start.

```vue
<motion.button
  :whileHover="{ scale: 1.1 }"
  :whilePress="{ scale: 0.95 }"
  @hoverStart="() => console.log('hover started!')"
/>
```

--------------------------------

### Vue Component with useAnimationFrame

Source: https://motion.dev/docs/vue-use-animation-frame

This example shows how to integrate useAnimationFrame within a Vue 3 script setup component. It imports the hook, defines a ref for the DOM element, and applies a rotation transform on each animation frame using the provided time.

```javascript
import { useAnimationFrame } from 'motion-v'

const domRef = ref()

useAnimationFrame((time, delta) => {
  domRef.value.style.transform = `rotateY(${time}deg)`
})
```

```html
<template>
  <div :ref="domRef" />
</template>
```

--------------------------------

### Listening for Pan Start Event

Source: https://motion.dev/docs/vue-motion-component

The `onPanStart` callback fires when a pan gesture begins, providing event and info objects.

```javascript
<motion.div @panStart="(event, info) => console.log(info.delta.x)" />
```

--------------------------------

### Handle press start with `onPressStart`

Source: https://motion.dev/docs/vue-motion-component

The `onPressStart` callback is triggered when a pointer begins pressing the component, receiving the `PointerEvent`.

```vue
<motion.div @pressStart="(event) => console.log(event)" />
```

--------------------------------

### onPanStart Callback

Source: https://motion.dev/docs/vue-motion-component

Callback function that fires when a pan gesture starts. It receives the triggering PointerEvent and an info object.

```APIDOC
## `onPanStart`

### Description
Callback function that fires when a pan gesture starts. Provided the triggering `PointerEvent` and `info`.

### Parameters
- `event` (PointerEvent) - The triggering pointer event.
- `info` (object) - An object containing pointer information (similar to `onPan`).

### Usage Example
```html
<motion.div @panStart="(event, info) => console.log(info.delta.x)" />
```
```

--------------------------------

### Get Motion Value State with get()

Source: https://motion.dev/docs/vue-motion-value

Demonstrates retrieving the current state of a motion value using the `get` method.

```javascript
x.get() // 100
```

--------------------------------

### Set initial animation state

Source: https://motion.dev/docs/vue

Define the starting state of an animation using the `initial` prop. This example scales the button from 0 to 1.

```vue
<motion.button :initial="{ scale: 0 }" :animate="{ scale: 1 }" />
```

--------------------------------

### Hover Gesture Example

Source: https://motion.dev/docs/vue-gestures

Implement hover detection with whileHover animation and optional hoverStart/hoverEnd event listeners.

```vue
<motion.a
  :whileHover="{ scale: 1.2 }"
  @hoverStart="event => {}"
  @hoverEnd="event => {}"
/>
```

--------------------------------

### Import Slimmer `m` Component

Source: https://motion.dev/docs/vue-lazymotion

Import the `m` component from `motion-v` instead of the full `motion` component to start with a smaller bundle size.

```javascript
import { m } from "motion-v"

```

--------------------------------

### onHoverStart

Source: https://motion.dev/docs/vue-motion-component

Callback function that fires when a pointer starts hovering over the component. Receives the triggering `PointerEvent`.

```APIDOC
## `onHoverStart`

### Description
Callback function that fires when a pointer starts hovering over the component. Provided the triggering `PointerEvent`.

### Usage
```html
<motion.div @hoverStart="(event) => console.log(event)" />
```
```

--------------------------------

### Chaining useVelocity

Source: https://motion.dev/docs/vue-use-velocity

Demonstrates how to chain useVelocity to get the acceleration (velocity of velocity) of a motion value.

```javascript
const x = useMotionValue(0)
const xVelocity = useVelocity(x)
const xAcceleration = useVelocity(xVelocity)
```

--------------------------------

### Page Scroll Indicator Example

Source: https://motion.dev/docs/vue-use-scroll

Demonstrates using scrollYProgress to control the scaleX style of a motion div for a progress bar.

```vue
<script setup>
  const { scrollYProgress } = useScroll()
</script>

<template>
   <motion.div :style="{ scaleX: scrollYProgress }" />
</template>
```

--------------------------------

### Vue Motion Drag Start Callback

Source: https://motion.dev/docs/vue-motion-component

Callback function that fires when a drag gesture starts. It provides the triggering PointerEvent and an info object.

```vue
<motion.div drag @dragStart="(event, info) => console.log(info.delta.x)" />
```

--------------------------------

### Handle hover start with `onHoverStart`

Source: https://motion.dev/docs/vue-motion-component

The `onHoverStart` callback is triggered when a pointer begins hovering over the component, receiving the `PointerEvent`.

```vue
<motion.div @hoverStart="(event) => console.log(event)" />
```

--------------------------------

### Detect animation start with `onAnimationStart`

Source: https://motion.dev/docs/vue-motion-component

Use `onAnimationStart` to execute a callback when an animation begins. The callback receives the target or variant name of the animation.

```vue
<motion.circle
  :animate="{ r: 10 }"
  @animationStart="latest => console.log(latest.r)"
/>
```

--------------------------------

### Set Motion Value to Color

Source: https://motion.dev/docs/vue-motion-value

Example of setting a motion value to a string, such as a color value.

```javascript
x.set("#f00")
```

--------------------------------

### Advanced Event Handling with on() and Cleanup

Source: https://motion.dev/docs/vue-use-motion-value-event

This example shows advanced usage of the motion value's `on` method within a watcher, demonstrating how to manually subscribe to events and ensure cleanup. It listens to 'change' events on both 'x' and 'y' motion values and provides a cleanup function to unsubscribe.

```javascript
watch([x, y],(n,o,onCleanUp) => {
  const doSomething = () => {}
  
  const unsubX = x.on("change", doSomething)
  const unsubY = y.on("change", doSomething)
  
  onCleanUp(() => {
    unsubX()
    unsubY()
  })
},{
  immediate:true
})
```

--------------------------------

### Basic useTime Usage

Source: https://motion.dev/docs/vue-use-time

This example demonstrates how to use useTime to create a perpetual rotation animation. It composes useTime with useTransform to map elapsed time to a rotation degree.

```vue
<script setup>
const time = useTime()
const rotate = useTransform(time, [0, 4000], [0, 360], { clamp: false })
</script>

<template>
  <motion.div :style="{ rotate }" />
</template>
```

--------------------------------

### Composing useTime with useTransform

Source: https://motion.dev/docs/vue-use-time

Illustrates how to use the useTime hook and compose its output with useTransform to create a dynamic animation. The example maps a time range to a degree range for rotation.

```javascript
const time = useTime()
const rotate = useTransform(
  time,
  [0, 4000], // For every 4 seconds...
  [0, 360], // ...rotate 360deg
  { clamp: false }
)
```

--------------------------------

### Setup Motion Components with Reka

Source: https://motion.dev/docs/vue-radix

Use the `asChild` prop on Reka components to allow them to render a Motion component as their DOM node, enabling animation props.

```vue
<template>
  <ToastRoot :as-child="true">
    <Motion
      :initial="{ opacity: 0 }"
      :animate="{ opacity: 1 }"
      layout
    >

```

--------------------------------

### Initial prop as animation target

Source: https://motion.dev/docs/vue-motion-component

Set the `initial` prop to an animation target object to define the starting visual state of the motion component.

```vue
<motion.section :initial="{ opacity: 0, x: 0 }" />

```

--------------------------------

### Basic motion component usage

Source: https://motion.dev/docs/vue

Use the `<motion />` component as a base for animating standard DOM elements. This example shows a basic `motion.div`.

```vue
<template>
  <motion.div />
</template>
```

--------------------------------

### Check Reduced Motion Setting

Source: https://motion.dev/docs/vue-use-reduced-motion

Import and call useReducedMotion to get a boolean indicating if reduced motion is enabled.

```javascript
const shouldReduceMotion = useReducedMotion()
```

--------------------------------

### Animate a button with opacity

Source: https://motion.dev/docs/vue

Use the `<motion />` component to animate elements. This example animates a button's opacity to 1.

```vue
<motion.button :animate="{ opacity: 1 }" />
```

--------------------------------

### Subscribe to Motion Value Events with on()

Source: https://motion.dev/docs/vue-motion-value

Example of subscribing to motion value events like 'change' using the `on` method. Returns an unsubscribe function.

```javascript
const unsubscribe = x.on("change", latest => console.log(latest))
```

--------------------------------

### Vue Motion InViewOptions

Source: https://motion.dev/docs/vue-motion-component

Configures how the element is tracked within the viewport using IntersectionObserver options. This example sets 'once' to true.

```vue
<motion.section
  :whileInView="{ opacity: 1 }"
  :inViewOptions="{ once: true }"
/>
```

--------------------------------

### Snap Drag to Cursor

Source: https://motion.dev/docs/vue-use-drag-controls

Make the motion component snap immediately to the cursor during a drag gesture by passing snapToCursor: true to the start method.

```javascript
controls.start(event, { snapToCursor: true })
```

--------------------------------

### Vue Motion LayoutId Example

Source: https://motion.dev/docs/vue-motion-component

Animates layout changes and crossfades elements with matching layoutIds when entering or leaving the DOM.

```vue
<motion.li v-for="item in items" layout>
    {{item.name}}
    <motion.div v-if="item.isSelected" layoutId="underline" />
 </motion.li>
```

--------------------------------

### Update Motion Value with set()

Source: https://motion.dev/docs/vue-motion-value

Example of updating a motion value's state using the `set` method. Changes are batched to the next animation frame.

```javascript
x.set(100)
```

--------------------------------

### Configure Default Transitions with MotionConfig

Source: https://motion.dev/docs/vue-motion-config

Use MotionConfig to set a fallback transition for all child motion components. This example sets a default duration of 1 second for all animations within the config.

```vue
<script setup>
  import { motion, MotionConfig } from "motion-v"
</script>

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

--------------------------------

### Start Drag Gesture from Another Element

Source: https://motion.dev/docs/vue-use-drag-controls

Initiate a drag session from another element's pointerdown event by calling the controls.start method with the event object.

```html
<div @pointerdown="(event) => controls.start(event)" />
```

--------------------------------

### Orchestration: Delay Animation

Source: https://motion.dev/docs/vue-transitions

Delays the start of an animation by a specified duration in seconds. Negative values can start the animation at a point in its past.

```javascript
animate(element, { filter: "blur(10px)" }, { delay: 0.3 })
```

--------------------------------

### Import useInView from Motion

Source: https://motion.dev/docs/vue-use-in-view

Demonstrates how to import the useInView hook from the motion-v library.

```javascript
import { useInView } from "motion-v"
```

--------------------------------

### Get Motion Value Velocity

Source: https://motion.dev/docs/vue-motion-value

Shows how to get the current velocity of a numerical motion value using `getVelocity`. Velocity is calculated per second.

```javascript
const xVelocity = x.getVelocity()
```

--------------------------------

### Import useMotionTemplate

Source: https://motion.dev/docs/vue-use-motion-template

Shows how to import the useMotionTemplate hook from the motion library.

```javascript
import { useMotionTemplate } from "motion-v"
```

--------------------------------

### Set default transition with `transition`

Source: https://motion.dev/docs/vue-motion-component

Define a default `transition` for a component to use when animation props lack a specific transition. This example sets a spring type transition.

```vue
<motion.div :transition="{ type: 'spring' }" :animate="{ scale: 1.2 }" />
```

--------------------------------

### Importing useAnimate

Source: https://motion.dev/docs/vue-use-animate

Shows how to import the useAnimate hook from the 'motion-v' library.

```javascript
import { useAnimate } from "motion-v"
```

--------------------------------

### Create Spring-Animated Motion Values

Source: https://motion.dev/docs/vue-motion-value

Demonstrates using `useSpring` to create motion values that animate with spring physics, driven by other motion values.

```javascript
const dragX = useMotionValue(0)
const dragY = useMotionValue(0)
const x = useSpring(dragX)
const y = useSpring(dragY)
```

--------------------------------

### Track Page Scroll with useScroll

Source: https://motion.dev/docs/vue-use-scroll

Use useScroll to get the scrollY motion value and log its changes.

```vue
const { scrollY } = useScroll()

useMotionValueEvent(scrollY, "change", (latest) => {
  console.log("Page scroll: ", latest)
})
```

--------------------------------

### Configure spring transition options

Source: https://motion.dev/docs/vue-use-spring

Customize the spring animation by providing transition options like stiffness.

```javascript
useSpring(0, { stiffness: 300 })

```

--------------------------------

### Import useVelocity

Source: https://motion.dev/docs/vue-use-velocity

Import the useVelocity hook from the motion-v library.

```javascript
import { useVelocity } from "motion-v"
```

--------------------------------

### Controlling Drag with DragControls

Source: https://motion.dev/docs/vue-motion-component

Initiate dragging from a different component using `useDragControls`. The `start` method can be called with pointer events.

```vue
<script setup>
  const dragControls = useDragControls()
  
  function startDrag(event) {
    dragControls.start(event, { snapToCursor: true })
  }
</script>

<template>
  <div @pointerDown="startDrag" />
  <motion.div drag="x" :dragControls="dragControls" />
</template>
```

--------------------------------

### Import motion component

Source: https://motion.dev/docs/vue-motion-component

Import the motion component from the 'motion-v' library to begin using it.

```javascript
import { motion } from "motion-v"

```

--------------------------------

### Initialize Motion Value

Source: https://motion.dev/docs/vue-motion-value

Illustrates the basic usage of `useMotionValue` to create a motion value with an initial state.

```javascript
import { useMotionValue } from "motion-v"

const x = useMotionValue(0)
```

--------------------------------

### Import useSpring

Source: https://motion.dev/docs/vue-use-spring

Import the useSpring hook from the motion library.

```javascript
import { useSpring } from "motion-v"

```

--------------------------------

### Using Registered Presets

Source: https://motion.dev/docs/vue-directive

Apply globally registered custom presets directly as directives on HTML elements.

```html
<template>
  <div v-fade-in>
    Fade
  </div>
  
  <div v-slide-up>
    Slide
  </div>
  
  <div v-scale-in>
    Scale
  </div>
</template>
```

--------------------------------

### Basic Gesture Animations

Source: https://motion.dev/docs/vue-gestures

Use whileHover and whilePress props to define animation targets for hover and press gestures.

```vue
<motion.button
  :whileHover="{
    scale: 1.2,
    transition: { duration: 1 },
  }"
  :whilePress="{ scale: 0.9 }"
/>
```

--------------------------------

### Basic useTransform with two motion values

Source: https://motion.dev/docs/vue-use-transform

Demonstrates creating a new motion value 'z' by summing the values of 'x' and 'y'.

```javascript
const x = useMotionValue(1)
const y = useMotionValue(1)

const z = useTransform(() => x.get() + y.get()) // z.get() === 2
```

--------------------------------

### Vue Motion WhileInView Target

Source: https://motion.dev/docs/vue-motion-component

Sets the target properties for animation when the element is in view. This example uses an object to define opacity.

```vue
<!-- As target -->
<motion.div :whileInView="{ opacity: 1 }" />
```

--------------------------------

### useInView with Options Object

Source: https://motion.dev/docs/vue-use-in-view

Configure useInView with an options object to customize its behavior, such as setting the 'once' option to true.

```javascript
const isInView = useInView(domRef, { once: true })
```

--------------------------------

### Import useTransform from motion-v

Source: https://motion.dev/docs/vue-use-transform

Shows the import statement for useTransform from the motion-v library.

```javascript
import { useTransform } from "motion-v"
```

--------------------------------

### Vue Motion Layout Dependency

Source: https://motion.dev/docs/vue-motion-component

Optimizes layout animations by only triggering measurements when the layoutDependency prop changes. This example uses an 'isOpen' boolean.

```vue
<motion.nav layout :layoutDependency="isOpen" />
```

--------------------------------

### Vue Motion WhileInView Variants

Source: https://motion.dev/docs/vue-motion-component

Sets the target variants for animation when the element is in view. This example uses a string to define the 'visible' variant.

```vue
// As variants
<motion.div whileInView="visible" />
```

--------------------------------

### Use useMotionTemplate for Drop Shadow

Source: https://motion.dev/docs/vue-use-motion-template

Demonstrates using useMotionTemplate to create a drop-shadow filter string with multiple motion values in a Vue component.

```vue
<script setup>
  const shadowX = useSpring(0)
  const shadowY = useMotionValue(0)
  const filter = useMotionTemplate`drop-shadow(${shadowX}px ${shadowY}px 20px rgba(0,0,0,0.3))`
</script>

<template>
 <motion.div :style="{ filter }" />  
</template>
```

--------------------------------

### Exit Animations with AnimatePresence

Source: https://motion.dev/docs/vue-reorder

Demonstrates how to use AnimatePresence with ReorderItem to animate items as they enter or leave the list.

```vue
<AnimatePresence>
    <ReorderItem
      v-for="item in items"
      :key="item"
      :initial="{ opacity: 0 }"
      :animate="{ opacity: 1 }"
      :exit="{ opacity: 0 }"
    />
</AnimatePresence>
```

--------------------------------

### Subscribe to Motion Value Changes

Source: https://motion.dev/docs/vue-motion-value

Example of subscribing to motion value updates using the `useMotionValueEvent` hook. Listeners are called with the latest value.

```vue
useMotionValueEvent(x, "change", (latest) => console.log(latest))
```

--------------------------------

### Motion Value API

Source: https://motion.dev/docs/vue-motion-value

Provides methods to interact with motion values, including getting their state and velocity, setting new states, and managing animations.

```APIDOC
## Motion Value API

### `get()`

#### Description
Returns the latest state of the motion value.

### `getVelocity()`

#### Description
Returns the latest velocity of the motion value. Returns `0` if the value is non-numerical.

### `set(newValue)`

#### Description
Sets the motion value to a new state.

#### Parameters
* **newValue** (number | string) - The new state for the motion value.

#### Example
```javascript
x.set("#f00")
```

### `jump(newValue)`

#### Description
Jumps the motion value to a new state, resetting velocity and ending active animations.

#### Parameters
* **newValue** (number | string) - The new state for the motion value.

#### Example
```javascript
const x = useSpring(0)
x.jump(10)
console.log(x.getVelocity()) // 0
```

### `isAnimating()`

#### Description
Returns `true` if the value is currently animating.

### `stop()`

#### Description
Stops the active animation of the motion value.

### `on(event, listener)`

#### Description
Subscribes to motion value events. Returns a function to unsubscribe the listener.

#### Parameters
* **event** (string) - The event to listen for. Available events: `"change"`, `"animationStart"`, `"animationCancel"`, `"animationComplete"`.
* **listener** (function) - The callback function to execute when the event is triggered.

#### Example
```javascript
const unsubscribe = x.on("change", latest => console.log(latest))
```

### `destroy()`

#### Description
Destroys and cleans up subscribers to this motion value. Typically handled automatically.
```

--------------------------------

### Custom Transform Order with transformTemplate (Generated String)

Source: https://motion.dev/docs/vue-motion-component

Customize the order of transforms by providing a function to transformTemplate. This example uses the generated transform string.

```vue
<!-- // Or the generated transform string -->
<motion.div
  :style="{ x: 0, rotate: 180 }"
  :transformTemplate="(latest, generated) => `translate(-50%, -50%) ${generated}`"
/>
```

--------------------------------

### v-motion with Props

Source: https://motion.dev/docs/vue-directive

Use v-motion as a marker and pass animation options as individual props for finer control.

```html
<div
  v-motion
  :initial="{ opacity: 0, y: 30 }"
  :animate="{ opacity: 1, y: 0 }"
  :transition="{ duration: 0.6 }"
>
  Fade In
</div>
```

--------------------------------

### Animate rotation with the 'animate' prop

Source: https://motion.dev/docs/vue

Animate a `motion` component by providing values to the `animate` prop. This example rotates a list element by 360 degrees.

```vue
<motion.ul :animate="{ rotate: 360 }" />
```

--------------------------------

### Importing useMotionValueEvent

Source: https://motion.dev/docs/vue-use-motion-value-event

Shows how to import the useMotionValueEvent hook from the 'motion-v' library.

```javascript
import { useMotionValueEvent } from "motion-v"
```

--------------------------------

### Inertia Transition with Bounce Stiffness

Source: https://motion.dev/docs/vue-transitions

Configures the stiffness of the bounce spring when min or max constraints are set. Higher values create more sudden movement upon hitting a boundary.

```html
<motion.div
  drag
  :dragTransition="{
    min: 0,
    max: 100,
    bounceStiffness: 100
  }"
/>
```

--------------------------------

### Conditional Animation with useReducedMotion

Source: https://motion.dev/docs/vue-use-reduced-motion

Use the useReducedMotion hook to conditionally apply animations. This example replaces horizontal motion with opacity when reduced motion is enabled.

```javascript
import { useReducedMotion } from 'motion-v'

const props = defineProps({
  isOpen: Boolean
})

const shouldReduceMotion = useReducedMotion()
const closedX = computed(()=>shouldReduceMotion.value ? 0 : '-100%')

```

```html
<template>
  <Motion
    :animate="{
      opacity: isOpen ? 1 : 0,
      x: isOpen ? 0 : closedX
    }"
  />
</template>
```

--------------------------------

### Disable Automatic Drag Listener

Source: https://motion.dev/docs/vue-use-drag-controls

Prevent the motion component from automatically starting a drag gesture on pointerdown by passing the :drag-listener="false" prop.

```html
<motion.div
    drag
    :drag-listener="false"
    :drag-controls="controls"
  />
```

--------------------------------

### Basic LazyMotion Usage with `domAnimation`

Source: https://motion.dev/docs/vue-lazymotion

Use `LazyMotion` to load the `domAnimation` feature package, which includes animations, variants, exit animations, and press/hover/focus gestures. The `m` component is then used within this context.

```javascript
import { LazyMotion, domAnimation, m } from "motion-v"

```

```html
<template>
   <!--Load only the domAnimation package-->
  <LazyMotion :features="domAnimation">
    <m.div :animate="{ opacity: 1 }" />
  </LazyMotion>
</template>

```

--------------------------------

### Global Registration (Nuxt)

Source: https://motion.dev/docs/vue-directive

Configure the Nuxt module to enable global registration of the v-motion directive.

```javascript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['motion-v/nuxt'],
  motionV: {
    directives: true,
  },
})
```

--------------------------------

### Create useSpring with a unit string

Source: https://motion.dev/docs/vue-use-spring

Initialize a spring-powered motion value with a unit-type string target.

```javascript
const y = useSpring("100vh")

```

--------------------------------

### Initial prop with variants

Source: https://motion.dev/docs/vue-motion-component

Use variant names or arrays of variant names for the `initial` prop to set predefined animation states.

```vue
<motion.li initial="visible" />

```

```vue
<motion.div :initial="['visible', 'active']" />

```

--------------------------------

### Initialize and Apply Drag Controls

Source: https://motion.dev/docs/vue-use-drag-controls

Initialize useDragControls and pass the returned controls to a draggable motion component via the drag-controls prop.

```javascript
import { useDragControls, motion } from 'motion-v'

const controls = useDragControls()
```

```html
<motion.div drag :drag-controls="controls" />
```

--------------------------------

### Get Reduced Motion Preference

Source: https://motion.dev/docs/vue-use-reduced-motion

Call the useReducedMotion hook within a component to obtain a reactive boolean value indicating the user's preference for reduced motion.

```javascript
const prefersReducedMotion = useReducedMotion()
```

--------------------------------

### Custom Transform Order with transformTemplate

Source: https://motion.dev/docs/vue-motion-component

Customize the order of transforms (translate, scale, rotate, skew) by providing a function to transformTemplate. This example uses the latest transform values.

```vue
<!-- // Use the latest transform values -->
<motion.div
  :style="{ x: 0, rotate: 180 }"
  :transformTemplate="({ x, rotate }) => `rotate(${rotate}deg) translateX(${x}px)`"
/>
```

--------------------------------

### Basic Animation with v-motion

Source: https://motion.dev/docs/vue-directive

Apply basic animations like opacity and position changes using the v-motion directive.

```html
<div v-motion :initial="{ opacity: 0 }" :animate="{ opacity: 1 }">
  Hello Motion
</div>
```

--------------------------------

### useTransform with clamp option

Source: https://motion.dev/docs/vue-use-transform

Demonstrates the 'clamp' option. 'y' is clamped to the output range [0, 2] because clamp defaults to true. 'z' is not clamped and continues mapping beyond the range.

```javascript
<script setup>
const y = useTransform(x, [0, 1], [0, 2])
const z = useTransform(x, [0, 1], [0, 2], { clamp: false })

onMounted(() => {
  x.set(2)
  console.log(y.get()) // 2, input clamped
  console.log(z.get()) // 4
})
</script>
```

--------------------------------

### Import useTime Hook

Source: https://motion.dev/docs/vue-use-time

Shows the necessary import statement for using the useTime hook from the motion library.

```javascript
import { useTime } from "motion-v"
```

--------------------------------

### Staggering Child Animation Delays from End

Source: https://motion.dev/docs/vue-transitions

Control the direction of staggering delays with the 'from' option in the 'stagger' function. 'from: "last"' staggers delays starting from the last child.

```javascript
const transition = {
  delayChildren: stagger(0.1, { from: "last" })
}
```

--------------------------------

### Enabling Drag Propagation

Source: https://motion.dev/docs/vue-motion-component

Set `dragPropagation` to `true` to allow drag gestures to propagate to child components.

```html
<motion.div drag="x" dragPropagation />
```

--------------------------------

### Inertia Transition with Min and Max Constraints

Source: https://motion.dev/docs/vue-transitions

Sets minimum and maximum constraints for inertia-based dragging. The value will 'bump' against these boundaries.

```html
<motion.div
  drag
  :dragTransition="{ min: 0, max: 100 }"
/>
```

--------------------------------

### Import useDragControls

Source: https://motion.dev/docs/vue-use-drag-controls

Import the useDragControls hook from the motion library.

```javascript
import { useDragControls } from "motion-v"
```

--------------------------------

### Import AnimatePresence

Source: https://motion.dev/docs/vue-animate-presence

Import the AnimatePresence component from the motion-vue library.

```javascript
import { AnimatePresence } from "motion-v"
```

--------------------------------

### v-motion Mixed Syntax

Source: https://motion.dev/docs/vue-directive

Demonstrates how element props override binding value keys when both are used with v-motion.

```html
<!-- initial will be { opacity: 0.2 }, not { opacity: 0.5 } -->
<div
  v-motion="{ initial: { opacity: 0.5 }, transition: { duration: 0.5 } }"
  :initial="{ opacity: 0.2 }"
>
  Props Win
</div>
```

--------------------------------

### Configure unplugin-vue-components for Motion

Source: https://motion.dev/docs/vue

Set up `unplugin-vue-components` to auto-import Motion components. Note that the `<motion />` component itself requires manual import.

```javascript
import Components from 'unplugin-vue-components/vite'
import MotionResolver from 'motion-v/resolver'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      dts: true,
      resolvers: [
        MotionResolver()
      ],
    }),
  ],
})
```

--------------------------------

### Import useScroll

Source: https://motion.dev/docs/vue-use-scroll

Import the useScroll hook from the motion-v library.

```javascript
import { useScroll } from "motion-v"
```

--------------------------------

### Spring Transition with Velocity

Source: https://motion.dev/docs/vue-transitions

Sets the initial velocity of the spring animation.

```html
<motion.div
  :animate="{ rotate: 180 }"
  :transition="{ type: 'spring', velocity: 2 }"
/>
```

--------------------------------

### v-motion with Binding Value

Source: https://motion.dev/docs/vue-directive

Configure animations by passing all options as a single object to the v-motion directive.

```html
<div
  v-motion="{
    initial: { opacity: 0, x: -30 },
    animate: { opacity: 1, x: 0 },
    transition: { duration: 0.6 },
  }">
  Slide In
</div>
```

--------------------------------

### Spring Transition with Stiffness

Source: https://motion.dev/docs/vue-transitions

Adjusts the stiffness of the spring. Higher stiffness values create more sudden movement.

```html
<motion.section
  animate={{ rotate: 180 }}
  transition={{ type: 'spring', stiffness: 50 }}
/>
```

--------------------------------

### Forward motion props to custom component

Source: https://motion.dev/docs/vue-motion-component

Configure `motion.create()` with `forwardMotionProps: true` to allow the provided component to receive motion props like `animate`.

```javascript
motion.create(Component, { forwardMotionProps: true })

```

--------------------------------

### Create useSpring with a number

Source: https://motion.dev/docs/vue-use-spring

Initialize a spring-powered motion value with a numeric target.

```javascript
const x = useSpring(0)

```

--------------------------------

### Custom Presets with MotionPlugin

Source: https://motion.dev/docs/vue-directive

Configure custom animation presets that can be registered globally via the MotionPlugin.

```javascript
app.use(MotionPlugin, {
  presets: {
    'fade-in': {
      initial: { opacity: 0 },
      animate: { opacity: 1 },
      transition: { duration: 0.5 },
    },
    'slide-up': {
      initial: { opacity: 0, y: 40 },
      animate: { opacity: 1, y: 0 },
      transition: { duration: 0.5 },
    },
    'scale-in': {
      initial: { opacity: 0, scale: 0.5 },
      animate: { opacity: 1, scale: 1 },
      transition: { type: 'spring', stiffness: 300, damping: 20 },
    },
  },
})
```

--------------------------------

### Server-side rendering with initial prop

Source: https://motion.dev/docs/vue-motion-component

Motion components support SSR. The `initial` prop can be set to `false` to disable enter animations and render directly with `animate` values.

```vue
// Server will output `translateX(100px)`
<motion.div :initial="false" :animate="{ x: 100 }" />

```

--------------------------------

### Motion Primitive with 'as' prop

Source: https://motion.dev/docs/vue-motion-component

Use the `<Motion />` primitive component and specify the rendered element using the `as` prop.

```vue
<script setup>
import { Motion } from "motion-v"
</script>
<template>
  <Motion as="button">
    Click me
  </Motion>
</template>

```

--------------------------------

### Implementing onPan Callback

Source: https://motion.dev/docs/vue-motion-component

Use the `onPan` callback to execute a function when a pan gesture is recognized. Ensure touch-action CSS is set to 'none' for touch devices.

```javascript
function onPan(event, info) {
  console.log(info.point.x, info.point.y)
}

<motion.div @pan="onPan" />
```

--------------------------------

### Enabling Basic Drag

Source: https://motion.dev/docs/vue-motion-component

Enable dragging for a motion component by setting the `drag` prop to `true` for bidirectional dragging.

```html
<motion.div drag />
```

--------------------------------

### Initial prop as false

Source: https://motion.dev/docs/vue-motion-component

Set the `initial` prop to `false` to skip the enter animation and render the component directly with the values specified in the `animate` prop.

```vue
<motion.div :initial="false" :animate="{ opacity: 0 }" />

```

--------------------------------

### Setting Initial Visibility State

Source: https://motion.dev/docs/vue-use-in-view

Use the 'initial' option to define the state of isInView before the element has been measured, useful for initial rendering.

```javascript
const isInView = useInView(ref, { initial: true })
```

--------------------------------

### Animate on hover with `whileHover` (variants)

Source: https://motion.dev/docs/vue-motion-component

Use `whileHover` with variant names to trigger predefined animations when hovering.

```vue
<!-- As variants -->
<motion.div whileHover="hovered" />
```

--------------------------------

### Layout Animations with AnimatePresence and mode="sync"

Source: https://motion.dev/docs/vue-animate-presence

To ensure layout animations work correctly when mixing them with exit animations using `mode="sync"`, wrap the relevant components in `LayoutGroup`.

```vue
<LayoutGroup>
  <motion.ul layout>
    <AnimatePresence>
        <motion.li v-for="item in items" layout :key="item.id" />
    </AnimatePresence>
  </motion.ul>
</LayoutGroup>
```

--------------------------------

### Animating with Scope Ref

Source: https://motion.dev/docs/vue-use-animate

Shows how to use the animate function with the scope ref to animate a specific element with a duration.

```javascript
animate(scope.current, { opacity: 1 }, { duration: 1 })
```

--------------------------------

### Custom Presets with Nuxt Module

Source: https://motion.dev/docs/vue-directive

Define custom animation presets within the Nuxt configuration for global availability.

```javascript
export default defineNuxtConfig({
  modules: ['motion-v/nuxt'],
  motionV: {
    directives: true, // globally register v-motion
    presets: {
      'fade-in': {
        initial: { opacity: 0 },
        animate: { opacity: 1 },
      },
    },
  },
})
```

--------------------------------

### useSpring Hook

Source: https://motion.dev/docs/vue-motion-value

Creates a motion value that is driven by a spring physics simulation.

```APIDOC
## useSpring

### Description
Creates a motion value that is driven by a spring physics simulation.

### Usage
```javascript
import { useMotionValue, useSpring } from "motion-v"

const dragX = useMotionValue(0)
const x = useSpring(dragX)
```

### Parameters
* **initialValue** (number | MotionValue) - The initial value or motion value to drive the spring.
```

--------------------------------

### Spring Transition with Damping

Source: https://motion.dev/docs/vue-transitions

Configures the strength of the opposing force in a spring animation. A damping of 0 will cause the spring to oscillate indefinitely.

```html
<motion.a
  :animate="{ rotate: 180 }"
  :transition="{ type: 'spring', damping: 300 }"
/>
```

--------------------------------

### transition

Source: https://motion.dev/docs/vue-motion-component

Sets the default transition for animations when no specific transition is defined for an animation prop.

```APIDOC
## `transition`

### Description
The default transition for this component to use when an animation prop (`animate`, `whileHover` etc) has no `transition` defined.

### Usage
```html
<motion.div :transition="{ type: 'spring' }" :animate="{ scale: 1.2 }" />
```
```

--------------------------------

### Async Loading of Features

Source: https://motion.dev/docs/vue-lazymotion

Asynchronously load features using a dynamic import function for the `features` prop. This fetches features only after the initial render, further optimizing bundle size. Ensure features are exported from a separate file.

```javascript
// features.js
import { domAnimation } from "motion-v"
export default domAnimation
  
// index.js
const loadFeatures = import("./features.js")
  .then(res => res.default)

```

```html
<template>
    <LazyMotion :features="loadFeatures">
      <m.div :animate="{ scale: 1.5 }" />
    </LazyMotion>
</template>

```

--------------------------------

### Apply Transition to Motion Component and animate()

Source: https://motion.dev/docs/vue-transitions

Apply a defined transition object to a motion component's animate prop or to the animate() function.

```vue
// Motion component
<motion.div
  :animate="{ x: 100 }"
  :transition="transition"
/>

// animate() function
animate(".box", { x: 100 }, transition)
```

--------------------------------

### Compose Motion Values with useTransform

Source: https://motion.dev/docs/vue-motion-value

Illustrates composing motion values by creating a new motion value derived from another using a function.

```javascript
const y = useTransform(() => x.get() * 2)
```

--------------------------------

### Customizing Drag Transition

Source: https://motion.dev/docs/vue-motion-component

Customize the inertia transition applied when dragging finishes using `dragTransition` with properties like `bounceStiffness` and `bounceDamping`.

```html
<motion.div
  drag
  :dragTransition="{ bounceStiffness: 600, bounceDamping: 10 }"
/>
```

--------------------------------

### useTransform with value mapping

Source: https://motion.dev/docs/vue-use-transform

Maps the motion value 'x' to an 'opacity' value. When x is 0, opacity is 1; when x is 100, opacity is 0.

```javascript
// Value mapping
const color = useTransform(x, [0, 100], ["#f00", "00f"])
```

--------------------------------

### Layout Animation with `layout` Prop

Source: https://motion.dev/docs/vue

Apply the `layout` prop to enable Motion's layout animation engine. This automatically animates changes in layout, ensuring smooth transitions between element states.

```html
<motion.div layout />
```

--------------------------------

### Compose useScroll with useSpring

Source: https://motion.dev/docs/vue-use-scroll

Combine scrollYProgress with useSpring for a smoothed animation effect on the scaleX style.

```vue
<script setup>
const { scrollYProgress } = useScroll()
const scaleX = useSpring(scrollYProgress)
</script>

<template>
  <Motion :style="{ scaleX }" />
</template>
```

--------------------------------

### Track another motion value with useSpring

Source: https://motion.dev/docs/vue-use-spring

Configure useSpring to automatically animate towards the latest value of another motion value.

```javascript
const x = useMotionValue(0)
const y = useSpring(x)

```

--------------------------------

### Basic Dragging with Animation

Source: https://motion.dev/docs/vue-gestures

Enable drag functionality on a div and apply a scale and background color animation while dragging.

```vue
<motion.div drag :whileDrag="{ scale: 1.2, backgroundColor: '#f00' }" />
```

--------------------------------

### useTransform mapping to multiple motion values

Source: https://motion.dev/docs/vue-use-transform

Maps a single motion value 'offset' to multiple output motion values: opacity, scale, and filter.

```javascript
const opacity = useTransform(offset, [100, 600], [1, 0.4])
const scale = useTransform(offset, [100, 600], [1, 0.6])
const filter = useTransform(offset, [100, 600], ["blur(0px)", "blur(10px)"])
```

--------------------------------

### Spring Transition with Mass

Source: https://motion.dev/docs/vue-transitions

Sets the mass of the moving object in a spring animation. Higher mass values result in more lethargic movement.

```html
<motion.feTurbulence
  :animate="{ baseFrequency: 0.5 }"
  :transition="{ type: 'spring', mass: 0.5 }"
/>
```

--------------------------------

### Reorder Item Configuration

Source: https://motion.dev/docs/vue-reorder

Shows the basic structure for a Reorder.Item within a Reorder.Group, binding its value and displaying content.

```vue
<script setup>
import { Reorder } from "motion-v"
const items = ref([0,1,2,3])
</script>

<template>
  <Reorder.Group v-model:values="items">
      <Reorder.Item v-for="item in items" :key="item" :value="item">
        {{ item }}
      </Reorder.Item>
  </Reorder.Group>
</template>
```

--------------------------------

### Spring Transition with Bounce

Source: https://motion.dev/docs/vue-transitions

Apply a spring transition with a specified bounce value for rotation animation.

```vue
<motion.div
  :animate="{ rotateX: 90 }"
  :transition="{ type: 'spring', bounce: 0.25 }"
/>
```

--------------------------------

### Import useReducedMotion Hook

Source: https://motion.dev/docs/vue-use-reduced-motion

Import the useReducedMotion hook from the 'motion-v' library to use it in your components.

```javascript
import { useReducedMotion } from "motion-v"
```

--------------------------------

### Motion Primitive with 'as-child' prop

Source: https://motion.dev/docs/vue-motion-component

Use the `<Motion />` primitive component with the `as-child` prop to render the child element directly.

```vue
<script setup>
import { Motion } from "motion-v"
</script>
<template>
  <Motion as-child>
    <button>Click me</button>
  </Motion>
</template>

```

--------------------------------

### Use useMotionTemplate with Text and Motion Values

Source: https://motion.dev/docs/vue-use-motion-template

Illustrates using useMotionTemplate within a Vue component to create a filter string with both static text and motion values.

```vue
<script setup>
  const blur = useMotionValue(10)
  const saturate = useMotionValue(50)
  const filter = useMotionTemplate`blur(${10}px) saturate(${saturate}%)`
</script>

<template>
 <motion.div :style="{ filter }" />
</template>
```

--------------------------------

### Animate on press with `whilePress` (variants)

Source: https://motion.dev/docs/vue-motion-component

Use `whilePress` with variant names to trigger predefined animations when pressing.

```vue
<!-- // As variants -->
<motion.div whilePress="tapped" />
```
Tokens:
Raw