### Installing @vueuse/motion via npm

Source: https://github.com/vueuse/motion/blob/main/README.md

This command installs the `@vueuse/motion` package using npm, making it available for use in your project. It is the first step to integrate the library into a Vue application.

```bash
npm install @vueuse/motion
```

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

### Installing @vueuse/motion with Yarn

Source: https://github.com/vueuse/motion/blob/main/docs/content/1.getting-started/1.introduction.md

This command adds the `@vueuse/motion` package to your project's dependencies using Yarn, making it available for use in your application. It's the first step to integrate the library into your project.

```bash
yarn add @vueuse/motion
```

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

### Example of Server-Rendered Motion Initial State

Source: https://github.com/vueuse/motion/blob/main/docs/content/1.getting-started/2.nuxt.md

This HTML snippet illustrates the server-side rendered output of an element using `v-motion` with an `initial` variant. The `initial` styles (opacity and transform) are directly applied to the `style` attribute, ensuring the element appears in its starting animation state on page load.

```html
<div style="opacity:0;transform:translate3d(0px,100px,0px);">Hello</div>
```

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

### Installing @vueuse/motion Nightly Release

Source: https://github.com/vueuse/motion/blob/main/README.md

This command installs the nightly build of `@vueuse/motion`, allowing users to access the latest features and bug fixes before they are included in a stable release. It's useful for testing upcoming changes.

```bash
npm install @vueuse/motion@npm:vueuse-motion-nightly
```

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

### Component-Level Installation of VueUse Motion Directive

Source: https://github.com/vueuse/motion/blob/main/docs/content/1.getting-started/1.introduction.md

This JavaScript snippet shows how to import and register the `MotionDirective` at the component level. This approach allows for tree-shaking, only including the directive's code in components that explicitly use it, which can help optimize bundle size.

```javascript
import { MotionDirective as motion } from '@vueuse/motion'

export default {
  directives: {
    motion: motion(),
  },
}
```

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

### Globally Installing VueUse Motion Plugin

Source: https://github.com/vueuse/motion/blob/main/docs/content/1.getting-started/1.introduction.md

This JavaScript snippet demonstrates how to register the `MotionPlugin` globally with a Vue 3 application. This allows the `v-motion` directive to be used in any component throughout your application without explicit import, simplifying its usage.

```javascript
import { MotionPlugin } from '@vueuse/motion'

const app = createApp(App)

app.use(MotionPlugin)

app.mount('#app')
```

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

### Using useMotionProperties to Animate Element Properties (TypeScript)

Source: https://github.com/vueuse/motion/blob/main/docs/content/3.api/4.use-motion-properties.md

This example demonstrates how to use `useMotionProperties` to programmatically animate an HTML element's opacity and scale. It initializes a reactive reference to an HTMLElement and then modifies its `motionProperties` to apply visual transformations.

```TypeScript
const target = ref<HTMLElement>()

const { motionProperties } = useMotionProperties(target)

motionProperties.opacity = 0

motionProperties.scale = 2
```

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

### Applying and Stopping Motion Transitions with useMotionControls (TypeScript)

Source: https://github.com/vueuse/motion/blob/main/docs/content/3.api/7.use-motion-controls.md

This example demonstrates how to use `useMotionControls` to apply and stop motion transitions on an HTML element. It initializes motion properties, defines variants, applies a custom variant, and shows how to programmatically stop ongoing transitions using `stopTransitions()` and apply variants by key.

```TypeScript
const target = ref<HTMLElement>()

const { motionProperties } = useMotionProperties(target)

const { apply, stopTransitions } = useMotionControls(motionProperties, {
  initial: {
    y: 100,
    opacity: 0,
  },
  custom: {
    y: 0,
    opacity: 1,
  },
})

apply({
  opacity: 1,
  scale: 2,
})

setTimeout(() => {
  stopTransitions()

  console.log('Stopped after 200ms!')
}, 200)

const applyCustom = async () => {
  await apply('custom')

  console.log('Custom applied!')
}
```

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

### Using reactiveTransform in Vue.js

Source: https://github.com/vueuse/motion/blob/main/docs/content/3.api/12.reactive-transform.md

This example demonstrates how to use `reactiveTransform` to create a reactive CSS transform. It initializes `x`, `y`, and `rotate` properties, and then updates the `x` property reactively on a click event, showing how `state` and `transform` are used.

```Vue
<template>
  <div :style="{transform}" @click="shift" />
</template>

<script setup>
const { state, transform } = reactiveTransform({
  x: 100,
  y: 25,
  rotate: 25,
})

const shift = () => {
  state.x += 100
}
</script>
```

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

### Applying v-motion Directive for Basic Animation in Vue

Source: https://github.com/vueuse/motion/blob/main/README.md

This Vue template example shows how to use the `v-motion` directive to animate an HTML element. It defines initial and enter states for opacity and Y-axis position, providing a smooth transition when the element appears.

```vue
<template>
  <div
    v-motion
    :initial="{
      opacity: 0,
      y: 100,
    }"
    :enter="{
      opacity: 1,
      y: 0,
    }"
  />
</template>
```

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

### Using reactiveStyle for Dynamic Styling in Vue

Source: https://github.com/vueuse/motion/blob/main/docs/content/3.api/11.reactive-style.md

This Vue example demonstrates how to use `reactiveStyle` to create a reactive style object. It initializes `opacity` and `backgroundColor` and provides a `toggleColor` method to dynamically change the background color by modifying the `state` object, which automatically updates the bound `:style` attribute.

```Vue
<template>
  <div
    :style="elementStyle" @click="toggleColor"
  />
</template>

<script setup>
const { state, style: elementStyle } = reactiveStyle({
  opacity: 0,
  backgroundColor: 'blue',
})

const toggleColor = () => {
  if (state.backgroundColor === 'blue')
    state.backgroundColor === 'red'
  else
    state.backgroundColor === 'blue'
}
</script>
```

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

### Applying Initial and Enter Variants with Transition in VueUse Motion

Source: https://github.com/vueuse/motion/blob/main/docs/content/2.features/5.variants.md

This snippet demonstrates applying both initial and enter variants to a Vue element using `v-motion`. The element starts with `opacity: 0` and `y: 100` (initial) and then transitions to `opacity: 1` and `y: 0` (enter) with a spring-type transition, 100ms delay, and 100 stiffness, causing it to fade in smoothly after 100ms.

```Vue
<div
  v-motion
  :initial="{
    opacity: 0,
    y: 100,
  }"
  :enter="{
    opacity: 1,
    y: 0,
    transition: {
      type: 'spring',
      stiffness: '100',
      delay: 100,
    },
  }"
/>
```

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

### Controlling Motion Variants State in Vue

Source: https://github.com/vueuse/motion/blob/main/docs/content/3.api/5.use-motion-variants.md

This example demonstrates how to define motion variants using `MotionVariants` and control their application using `useMotionVariants`. It shows setting an initial variant and then transitioning to another variant after the next DOM update cycle.

```TypeScript
const variants: MotionVariants = {
  initial: {
    opacity: 0,
    y: 100,
  },
  enter: {
    opacity: 1,
    y: 0,
  },
}

const { variant, state } = useMotionVariants(variants)

variant.value = 'initial'

nextTick(() => (variant.value = 'enter'))
```

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

### Using Keyframe Transitions in VueUse Motion

Source: https://github.com/vueuse/motion/blob/main/docs/content/2.features/4.transition-properties.md

This example demonstrates a keyframe transition, suitable for properties like colors or when precise timing is needed. It sets the `duration` and `ease` properties to control the animation's timing and acceleration curve, offering various easing options.

```Vue
<div
  v-motion
  :initial="{
    y: 100,
    opacity: 0,
  }"
  :enter="{
    y: 0,
    opacity: 1,
    transition: {
      duration: 300,
      type: 'keyframes',
      ease: 'easeIn',
    },
  }"
/>
```

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

### Accessing Named Motion Instance with useMotions (Vue)

Source: https://github.com/vueuse/motion/blob/main/docs/content/3.api/3.use-motions.md

This example demonstrates how to declare a named motion instance using `v-motion` in a Vue template and then access it in the script using `useMotions`. The `myName` instance is destructured from the `useMotions` hook, allowing control over the associated DOM element's motion.

```Vue
<template>
    <div v-motion="'myName'">
</template>

<script setup>
import { useMotions } from '@vueuse/motion'

const { myName } = useMotions()
</script>
```

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

### Implementing SSR Animations with v-motion in Vue

Source: https://github.com/vueuse/motion/blob/main/docs/content/1.getting-started/2.nuxt.md

This Vue component demonstrates two ways to use the `v-motion` directive for SSR-compatible animations: directly defining variants within the directive, or binding them from reactive script setup variables. The `initial` variant is resolved server-side and merged into the element's style attribute.

```vue
<template>
  <div
    v-motion="{
      initial: {
        y: 100,
        opacity: 0
      },
      enter: {
        y: 0,
        opacity: 1
      }
    }"
  >
    Hello
  </div>

  <!-- OR -->

  <div
    v-motion
    :initial="initial"
    :enter="enter"
  >
    Hello
  </div>
</template>

<script setup>
const initial = ref({
  y: 100,
  opacity: 0,
})

const enter = ref({
  y: 0,
  opacity: 1,
})
</script>
```

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

### Using useElementStyle to Sync Element Style (TypeScript)

Source: https://github.com/vueuse/motion/blob/main/docs/content/3.api/9.use-element-style.md

This snippet demonstrates how to use `useElementStyle` to bind a reactive object to an HTML element's CSS style. It initializes a ref for the target element, then uses `useElementStyle` to get a reactive `style` object. Modifying properties on this `style` object, like `opacity`, directly updates the element's CSS.

```TypeScript
const target = ref<HTMLElement>()

const { style, stop } = useElementStyle(target)

style.opacity = 0
```

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

### Using useMotionTransitions with useMotionProperties in TypeScript

Source: https://github.com/vueuse/motion/blob/main/docs/content/3.api/6.use-motion-transitions.md

This example demonstrates how to use `useMotionTransitions` to animate a motion property. It initializes a `ref` as the target, uses `useMotionProperties` to link motion properties to the target, sets an initial `x` value, then uses `push` to animate `x` to `100` with a spring transition. Finally, it calls `stop` after 4 seconds to halt all animations.

```TypeScript
const target = ref<HTMLElement>()

const { motionProperties } = useMotionProperties(target)

motionProperties.x = 0

const { push, stop } = useMotionTransitions()

push('x', 100, motionProperties, { type: 'spring', bounce: 4 })

setTimeout(stop, 4000)
```

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

### Animating HTML Element with useSpring in Vue

Source: https://github.com/vueuse/motion/blob/main/docs/content/3.api/2.use-spring.md

This example demonstrates how to use `useSpring` to animate an HTML element's position (`x`, `y`) in a Vue 3 Single File Component. It initializes motion properties, configures a spring animation with duration and bounce, and provides functions to trigger the animation and stop it based on user interaction (click or escape key).

```html
<template>
  <div class="container" tabindex="0" @keyup.esc="stop()">
    <div ref="box" class="box" @click="animate">Click me</div>
  </div>
</template>
```

```javascript
<script setup>
import { ref } from 'vue'
import { useSpring, useMotionProperties } from '@vueuse/motion'

const box = ref(null)

const { motionProperties } = useMotionProperties(box, {
  x: 0,
  y: 0,
})

const { set, stop } = useSpring(motionProperties, {
    duration: 1000,
    bounce: 0.0,
})

function animate() {
  set({
    x: Math.random() * 400,
    y: Math.random() * 400,
  })
}
</script>
```

```css
<style scoped>
.container {
  width: 500px;
  height: 500px;
  outline: 2px solid #41B883;
}
.box {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #41B883;
  color: white;
}
</style>
```

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

### Applying Motion to Child Elements with MotionGroup in Vue

Source: https://github.com/vueuse/motion/blob/main/docs/content/2.features/7.components.md

This example illustrates the use of the `<MotionGroup>` component to apply a common motion configuration (preset `slideVisibleLeft` and `duration` of 600ms) to all of its child elements. `<MotionGroup>` is renderless by default, acting as a wrapper for animation inheritance.

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

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

### Accessing v-motion Instance Controls in Vue

Source: https://github.com/vueuse/motion/blob/main/docs/content/2.features/1.directive-usage.md

This example shows how to name a `v-motion` instance in the template using `v-motion="'custom'"` and then access its controls programmatically using `useMotions` from `@vueuse/motion`. It demonstrates how to retrieve a specific motion instance by its name and dynamically change its active variant, enabling imperative control over animations.

```vue
<template>
  <div
    v-motion="'custom'"
    :initial="{ opacity: 0, y: 100 }"
    :enter="{ opacity: 1, y: 0 }"
    :variants="{ custom: { scale: 2 } }"
  />
</template>

<script>
import { useMotions } from '@vueuse/motion'

// Get custom controls
const { custom } = useMotions()

const customEvent = () => {
  // Change the current variant of `custom` element
  custom.variant.value = 'custom'
}
</script>
```

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

### Configuring Repeat Animation in VueUse Motion

Source: https://github.com/vueuse/motion/blob/main/docs/content/2.features/4.transition-properties.md

This example illustrates how to make an animation repeat indefinitely using `repeat: Infinity` and control its behavior with `repeatType: 'mirror'`, causing the animation to play forwards then backwards. `repeatDelay` can also be used to add a pause between repetitions.

```Vue
<div
  v-motion
  :initial="{
    scale: 1,
  }"
  :enter="{
    scale: 2,
    transition: {
      repeat: Infinity,
      repeatType: 'mirror',
    },
  }"
/>
```

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

### Applying Transition Delay in VueUse Motion

Source: https://github.com/vueuse/motion/blob/main/docs/content/2.features/4.transition-properties.md

This snippet demonstrates how to add a delay to a transition using the `delay` property within the `transition` object. The animation will wait for the specified duration (1000ms) before starting, allowing for staggered effects.

```Vue
<div
  v-motion
  :initial="{
    scale: 1,
  }"
  :enter="{
    scale: 2,
    transition: {
      delay: 1000,
    },
  }"
/>
```

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

### Applying VisibleOnce Variant for Single Viewport Entry Animation in VueUse Motion

Source: https://github.com/vueuse/motion/blob/main/docs/content/2.features/5.variants.md

This snippet uses the `visibleOnce` variant to animate a Vue element only the first time it enters the viewport. The element starts hidden (`opacity: 0`, `y: 100`) and transitions to visible (`opacity: 1`, `y: 0`). Unlike `visible`, this animation is triggered only once, providing a one-time fade-in effect.

```Vue
<div
  v-motion
  :initial="{
    opacity: 0,
    y: 100,
  }"
  :visibleOnce="{
    opacity: 1,
    y: 0,
  }"
/>
```

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

### Registering Custom v-motion Directives Globally in JavaScript

Source: https://github.com/vueuse/motion/blob/main/docs/content/2.features/1.directive-usage.md

This snippet illustrates how to define custom `v-motion` directives globally by configuring the `MotionPlugin` during Vue application setup. It registers a new directive, `v-motion-pop-bottom`, with predefined `initial` and `visible` animation properties, making it available for use on any element or component throughout the application. This allows for reusable animation patterns.

```javascript
import { MotionPlugin } from '@vueuse/motion'

const app = createApp(App)

app.use(MotionPlugin, {
  directives: {
    'pop-bottom': {
      initial: {
        scale: 0,
        opacity: 0,
        y: 100
      },
      visible: {
        scale: 1,
        opacity: 1,
        y: 0
      }
    }
  }
})

app.mount('#app')
```

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

### Creating and Applying Custom Variants in VueUse Motion

Source: https://github.com/vueuse/motion/blob/main/docs/content/2.features/5.variants.md

This snippet illustrates how to define and programmatically apply a custom variant in VueUse Motion. It defines a `custom` variant that scales an element to `2` with a spring transition. The `useMotions` composable is used to access the motion instance for `customElement`, allowing the `custom` variant to be activated dynamically, for example, via a custom event.

```Vue Template
<template>
  <div v-motion="'customElement'" :initial="{ scale: 1, }" :variants="{ custom:
  { scale: 2, transition: { type: \"spring\", stiffness: 100 } } }" />
</template>
```

```JavaScript
<script setup>
import { useMotions } from '@vueuse/motion'

// Access the motion instance using useMotions.
const { customElement } = useMotions()

// Dummy custom event function
const yourCustomEvent = () => {
  // Edit the variant using the motion instance.
  customElement.variant.value = 'custom'
}
</script>
```

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

### Applying Visible Variant for Viewport Entry Animation in VueUse Motion

Source: https://github.com/vueuse/motion/blob/main/docs/content/2.features/5.variants.md

This snippet uses the `visible` variant to animate a Vue element when it enters the viewport. The element starts hidden (`opacity: 0`, `y: 100`) and transitions to visible (`opacity: 1`, `y: 0`) upon becoming visible. When it leaves the viewport, the initial variant is reapplied, allowing it to fade in smoothly each time it enters.

```Vue
<div
  v-motion
  :initial="{
    opacity: 0,
    y: 100,
  }"
  :visible="{
    opacity: 1,
    y: 0,
  }"
/>
```

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

### Initializing useMotion with Variants in TypeScript

Source: https://github.com/vueuse/motion/blob/main/docs/content/3.api/1.use-motion.md

This snippet demonstrates how to initialize the `useMotion` composable in a Vue.js application using TypeScript. It sets up a reactive reference for the target HTML element and defines a `MotionVariants` object with 'initial' and 'enter' states, then creates a motion instance by passing these to `useMotion`.

```TypeScript
const target = ref<HTMLElement>()

const variants = ref<MotionVariants>({
  initial: {
    opacity: 0,
  },
  enter: {
    opacity: 1,
  },
})

const motionInstance = useMotion(target, variants)
```

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

### Configuring Motion Component with Variant and Shorthand Props in Vue

Source: https://github.com/vueuse/motion/blob/main/docs/content/2.features/7.components.md

This snippet showcases advanced configuration of the `<Motion>` component using various variant props (`initial`, `enter`, `hovered`) and custom variants via the `:variants` prop. It also demonstrates the use of shorthand `delay` and `duration` props to control transition timing for applicable variants.

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

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

### Initializing MotionPlugin in Vue Application

Source: https://github.com/vueuse/motion/blob/main/README.md

This JavaScript snippet demonstrates how to import and register the `MotionPlugin` with a Vue application. It ensures that the `v-motion` directive and other motion functionalities are globally available throughout the application.

```javascript
import { createApp } from "vue";
import { MotionPlugin } from "@vueuse/motion";
import App from "./App.vue";

const app = createApp(App);

app.use(MotionPlugin);

app.mount("#app");
```

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

### Applying Basic Animations with v-motion Directive in Vue

Source: https://github.com/vueuse/motion/blob/main/docs/content/2.features/1.directive-usage.md

This snippet demonstrates the basic usage of the `v-motion` directive on an HTML element within a Vue template. It configures initial, enter, custom, and hovered animation states, along with global delay and duration shorthand properties. The `initial` properties are applied before mounting, `enter` after mounting, `hovered` on pointer entry, and `custom` is a user-defined variant.

```vue
<template>
  <div
    v-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"
  />
</template>
```

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

### Applying Temporary Animations with VueUse Motion

Source: https://github.com/vueuse/motion/blob/main/docs/content/2.features/6.motion-instance.md

This snippet illustrates the `apply` function of a Motion instance, which allows animating to a variant definition without changing the element's current variant. It's useful for event-driven or temporary modifications and supports chaining animations by awaiting the returned promise. It shows applying a custom animation and then reverting to a predefined 'enter' state.

```Vue
<script setup lang="ts">
// Define target.
const target = ref<HTMLElement>()

// Get the variant from target motion instance.
const { apply } = useMotion(target, {
  initial: {
    scale: 1,
    opacity: 0,
  },
  enter: {
    opacity: 1,
    scale: 1,
  },
})

const customEvent = async () => {
  // Animate to a temporary variant.
  await apply({
    scale: 2,
    transition: {
      type: 'spring',
      damping: 100,
    },
  })

  // Revert back to enter state
  await apply('enter')
}
</script>
```

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

### Animating Element with useMotion in Vue

Source: https://github.com/vueuse/motion/blob/main/docs/content/2.features/2.composable-usage.md

This snippet demonstrates the basic usage of the `useMotion` composable to animate an HTML element. It imports `useMotion`, defines a `ref` for the target element, and then calls `useMotion` with the target and an object defining `initial` and `enter` variants for opacity and Y-position. The `motionInstance` returned can be used for further control.

```Vue
<script setup>
import { useMotion } from '@vueuse/motion'

const target = ref<HTMLElement>()

const motionInstance = useMotion(target, {
    initial: {
        opacity: 0,
        y: 100
    },
    enter: {
        opacity: 1,
        y: 0
    }
})
</script>
```

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

### Defining Custom Motion Directives in Nuxt Config

Source: https://github.com/vueuse/motion/blob/main/docs/content/1.getting-started/2.nuxt.md

This configuration snippet shows how to define custom motion directives, such as 'pop-bottom', within the `runtimeConfig.public.motion.directives` object in `nuxt.config.js`. This allows for global, reusable animation variants that can be applied via `v-motion`.

```javascript
{
  // nuxt.config.js
  runtimeConfig: {
    public: {
      motion: {
        directives: {
          'pop-bottom': {
            initial: {
              scale: 0,
              opacity: 0,
              y: 100
            },
            visible: {
              scale: 1,
              opacity: 1,
              y: 0
            }
          }
        }
      }
    }
  }
}
```

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

### Configuring VueUse Motion Nuxt Module

Source: https://github.com/vueuse/motion/blob/main/docs/content/1.getting-started/2.nuxt.md

This snippet demonstrates how to add `@vueuse/motion/nuxt` to the `modules` array in `nuxt.config.js`. This step is essential for integrating the package into a Nuxt application, enabling its specific features and directive declarations.

```javascript
{
  // nuxt.config.js
  modules: ['@vueuse/motion/nuxt']
}
```

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

### Controlling Variant Transitions with VueUse Motion

Source: https://github.com/vueuse/motion/blob/main/docs/content/2.features/6.motion-instance.md

This snippet demonstrates how to use the `variant` property of a Motion instance to trigger transitions between defined variants. It shows an `onComplete` callback within a transition to automatically switch to a 'custom' variant after the 'enter' animation finishes, effectively chaining animations.

```Vue
<script setup lang="ts">
// Define target.
const target = ref<HTMLElement>()

// Get the variant from target motion instance.
const { variant } = useMotion(target, {
  initial: {
    scale: 1,
    opacity: 0,
  },
  enter: {
    opacity: 1,
    transition: {
      // This will go to `custom` when enter is complete.
      onComplete: () => (variant.value = 'custom'),
    },
  },
  custom: {
    scale: 2,
    transition: {
      type: 'spring',
      damping: 100,
    },
  },
})
</script>
```

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

### Implementing Enter Variant for Element Appearance in VueUse Motion

Source: https://github.com/vueuse/motion/blob/main/docs/content/2.features/5.variants.md

This snippet applies an enter variant to a Vue element, causing it to transition from an initial hidden state (`opacity: 0`, `y: 100`) to a visible state (`opacity: 1`, `y: 0`) right after its creation. This allows for a smooth fade-in animation when the element appears on the page.

```Vue
<div
  v-motion
  :initial="{
    opacity: 0,
    y: 100,
  }"
  :enter="{
    opacity: 1,
    y: 0,
  }"
/>
```

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

### Using Motion Component with Preset in Vue

Source: https://github.com/vueuse/motion/blob/main/docs/content/2.features/7.components.md

This snippet demonstrates how to use the `<Motion>` component to apply a predefined animation preset (`slideVisibleLeft`) to a `<p>` element. The `is` prop specifies the underlying HTML element to render, while `preset` applies a set of pre-configured motion properties.

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

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

### Defining Initial Variant for Element State in VueUse Motion

Source: https://github.com/vueuse/motion/blob/main/docs/content/2.features/5.variants.md

This snippet defines the initial variant for a Vue element using `v-motion`. The element will be rendered with `opacity: 0` and `y: 100`, making it hidden and positioned 100px below its original position upon creation. This sets a base state for subsequent animations.

```Vue
<div
  v-motion
  :initial="{
    opacity: 0,
    y: 100,
  }"
/>
```

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

### Implementing Spring Transitions in VueUse Motion

Source: https://github.com/vueuse/motion/blob/main/docs/content/2.features/4.transition-properties.md

This snippet shows how to define a spring-based transition by setting `type: 'spring'` and configuring its physical properties like `stiffness`, `damping`, and `mass` for a natural, bouncy effect. Springs are ideal for dynamic and realistic motion.

```Vue
<div
  v-motion
  :initial="{
    y: 100,
    opacity: 0,
  }"
  :enter="{
    y: 0,
    opacity: 1,
    transition: {
      type: 'spring',
      stiffness: 250,
      damping: 25,
      mass: 0.5,
    },
  }"
/>
```

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

### Defining Per-Key Transitions in VueUse Motion

Source: https://github.com/vueuse/motion/blob/main/docs/content/2.features/4.transition-properties.md

This snippet illustrates how to apply different transition properties to individual animated keys within a single `v-motion` directive. It allows for complex, staggered, or independent animations for properties like `y` and `opacity`, enhancing animation choreography.

```Vue
<div
  v-motion
  :initial="{
    y: 100,
    opacity: 0,
  }"
  :enter="{
    y: 0,
    opacity: 1,
    transition: {
      y: {
        delay: 1600,
      },
      opacity: {
        duration: 1600,
      },
    },
  }"
/>
```

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

### Stopping Ongoing Animations with VueUse Motion

Source: https://github.com/vueuse/motion/blob/main/docs/content/2.features/6.motion-instance.md

This snippet demonstrates the `stop` function of a Motion instance, which is used to halt ongoing animations for a specific element. It shows how to stop all current animations by calling `stop()` without arguments, useful for immediate cessation of motion effects.

```Vue
<script setup lang="ts">
// Define target.
const target = ref<HTMLElement>()

// Get the variant from target motion instance.
const { stop } = useMotion(target, {
  initial: {
    scale: 1,
    opacity: 0,
  },
  visible: {
    opacity: 1,
  },
})

const customEvent = () => {
  // Stop the current animations.
  stop()
}
</script>
```

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

### Defining Transform Motion Properties in VueUse Motion (JavaScript)

Source: https://github.com/vueuse/motion/blob/main/docs/content/2.features/3.motion-properties.md

This snippet illustrates the definition of transform motion properties, which correspond to CSS `transform` arguments. It supports standard transform properties and provides shorthand `x`, `y`, `z` for `translateX`, `translateY`, `translateZ` respectively. Units are automatically handled.

```javascript
{
    x: 10,
    y: 20,
    scale: 1.2
}
```

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

### Applying Transform Properties with useElementTransform (TypeScript)

Source: https://github.com/vueuse/motion/blob/main/docs/content/3.api/10.use-element-transform.md

This snippet demonstrates how to use `useElementTransform` to apply CSS transform properties to an HTML element. It initializes a reactive transform object bound to a target element and then modifies its `scale` property, which automatically updates the element's CSS transform. The `stop` function is also exposed to halt the synchronization.

```TypeScript
const target = ref<HTMLElement>()

const { transform, stop } = useElementTransform(target)

transform.scale = 1.2
```

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

### Defining General Motion Properties in VueUse Motion (JavaScript)

Source: https://github.com/vueuse/motion/blob/main/docs/content/2.features/3.motion-properties.md

This snippet illustrates a basic object for defining general motion properties in VueUse Motion. It includes common animatable properties like `opacity`, `scale`, and `y` (for `translateY`). Units are automatically resolved, allowing numerical values without explicit unit specification.

```javascript
{
    opacity: 0,
    scale: 0.6,
    y: 100
}
```

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

### Implementing Tapped Variant for Scale Animation in VueUse Motion

Source: https://github.com/vueuse/motion/blob/main/docs/content/2.features/5.variants.md

This snippet demonstrates the `tapped` variant, which applies a scale animation when a Vue element is tapped or clicked. The element maintains a `scale: 1` initially and on hover, but scales down to `0.8` when activated by a tap or click event. This variant seamlessly combines mouse and touch events based on user pointer support.

```Vue
<div
  v-motion
  :initial="{
    scale: 1,
  }"
  :hovered="{
    scale: 1,
  }"
  :tapped="{
    scale: 0.8,
  }"
/>
```

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

### Implementing Focused Variant for Scale Animation in VueUse Motion

Source: https://github.com/vueuse/motion/blob/main/docs/content/2.features/5.variants.md

This snippet demonstrates the `focused` variant, which applies a scale animation when a Vue element receives focus. The element maintains a `scale: 1` initially and when visible, but scales up to `1.1` when it is focused. This variant uses a regular focus event listener.

```Vue
<div
  v-motion
  :initial="{
    scale: 1,
  }"
  :visible="{
    scale: 1,
  }"
  :focused="{
    scale: 1.1,
  }"
/>
```

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

### Defining Style Motion Properties in VueUse Motion (JavaScript)

Source: https://github.com/vueuse/motion/blob/main/docs/content/2.features/3.motion-properties.md

This snippet demonstrates how to define style-related motion properties. These properties directly map to CSS `style` attributes, with units automatically appended. Certain CSS properties like `transition`, `rotate`, and `scale` are forbidden here as they are reserved for transform properties.

```javascript
{
    opacity: 0,
    marginTop: 10
}
```

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

### Defining Leave Variant for Element Exit Animation in VueUse Motion

Source: https://github.com/vueuse/motion/blob/main/docs/content/2.features/5.variants.md

This snippet defines a leave variant for a Vue element, specifying its state when it is removed from the DOM. The element will transition to `y: -100` and `opacity: 0` upon leaving, creating a fade-out and move-up effect. To trigger this, the `leave` helper from the Motion Instance must be used, typically mapped to Vue's `@leave` event.

```Vue
<div
  v-motion
  :initial="{
    opacity: 0,
    y: 100,
  }"
  :enter="{
    opacity: 1,
    y: 0,
  }"
  :leave="{
    y: -100,
    opacity: 0,
  }"
/>
```

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

### Implementing Hovered Variant for Scale Animation in VueUse Motion

Source: https://github.com/vueuse/motion/blob/main/docs/content/2.features/5.variants.md

This snippet demonstrates the `hovered` variant, which applies a scale animation when a Vue element is hovered over. The element maintains a `scale: 1` initially and when visible, but scales up to `1.2` when the mouse pointer is over it. This variant uses a regular hover event listener and does not work on mobile devices.

```Vue
<div
  v-motion
  :initial="{
    scale: 1,
  }"
  :visible="{
    scale: 1,
  }"
  :hovered="{
    scale: 1.2,
  }"
/>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.