### Complete AnimateView Enter/Exit Setup

Source: https://motion.dev/docs/react-animate-view

This example demonstrates a full setup for animating an element's entry and exit using `AnimateView`, `useState`, and `startTransition`.

```jsx
import { AnimateView } from "motion-plus/animate-view"
import { startTransition, useState } from "react"

function Example() {
  const [show, setShow] = useState(true)
  
  return (
    <>
      <button onClick={() => startTransition(() => setShow(!show))}>
        Toggle
      </button>
      {show && (
        <AnimateView>
          <div className="box" />
        </AnimateView>
      )}
    </>
  )
}
```

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

### Import Motion+ Module

Source: https://motion.dev/docs/motion-plus-installation

Example of importing a specific module, `curtains`, from the `motion-plus` package after installation.

```javascript
import { curtains } from "motion-plus/curtains"
```

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

### Set Motion+ Token and Install Dependencies

Source: https://motion.dev/docs/motion-plus-installation

Export the `MOTION_TOKEN` environment variable with your actual token, then run your package manager's install command to fetch Motion+.

```bash
export MOTION_TOKEN=your-token-here
npm install   # or pnpm install / bun install
```

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

### Install Motion AI Kit via npx

Source: https://motion.dev/docs/ai-kit-install

Execute this command to run the Motion AI Kit installer script, which will prompt for configuration details such as your Motion API key, installation scope (project or global), and desired AI agents.

```bash
npx motion-ai
```

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

### AI Kit Example Adaptation Prompt for App Store Motion

Source: https://motion.dev/docs/ai-kit-context

Instructs the AI editor to adapt a specific named example from the Motion Examples gallery, such as the 'app store motion' example.

```prompt
adapt the app store motion example
```

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

### Install Motion via pnpm

Source: https://motion.dev/docs/react-installation

Use this command to install Motion in your project using pnpm.

```bash
pnpm add motion
```

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

### Basic useTime Animation Example

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

This example shows how to use `useTime` to get an elapsed time motion value and `useTransform` to map it to a `rotate` style property for a continuously animating `motion.div`.

```javascript
const time = useTime();
const rotate = useTransform(time, [0, 4000], [0, 360], { clamp: false });

return <motion.div style={{ rotate }} />
```

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

### Install Motion via npm

Source: https://motion.dev/docs/react-installation

Use this command to install Motion in your project using npm.

```bash
npm install motion
```

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

### AI Kit Example Adaptation Prompt for Tooltip

Source: https://motion.dev/docs/ai-kit-context

Prompts the AI editor to create a component, like a tooltip, by adapting an existing example using Motion and a specified UI library.

```prompt
create a tooltip with Motion and Base UI
```

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

### Install Motion via Yarn

Source: https://motion.dev/docs/react-installation

Use this command to install Motion in your project using Yarn.

```bash
yarn add motion
```

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

### AI Kit Example Adaptation Prompt for Vue App Store Motion

Source: https://motion.dev/docs/ai-kit-context

Instructs the AI editor to adapt a specific named example, explicitly targeting a particular framework like Vue.

```prompt
adapt the app store motion vue example
```

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

### AI Kit Example Adaptation Prompt for 3D Cube

Source: https://motion.dev/docs/ai-kit-context

Prompts the AI editor to create a specific animation, such as a spinning 3D cube, by adapting an existing example.

```prompt
make a spinning 3d cube
```

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

### Animating on Hover with Motion.js

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

This example demonstrates how to start an animation when a hover gesture begins and stop it when the hover ends. The `animate` function is used to create and control the animation.

```javascript
hover("li", (element) => {
  const animation = animate(element, { rotate: 360 })

  return () => animation.stop()
})
```

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

### Using the steps Easing Function with 'start' Option

Source: https://motion.dev/docs/easing-functions

Configure the `steps` easing function to make step changes occur at the beginning of each step by passing "start" as the second argument.

```javascript
const easing = steps(4, "start")

easing(0.2) // 0.25
```

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

### onPanStart

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

Callback function that fires when a pan gesture starts, providing the triggering PointerEvent and an info object with pan details.

```APIDOC
## Component Event: `onPanStart`

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

### Type
Event

### Parameters
- **event** (PointerEvent) - The triggering `PointerEvent`.
- **info** (object) - Contains `x` and `y` point values for `point`, `delta`, `offset`, and `velocity`.

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

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

### onPressStart

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

Callback function that fires when a pointer starts pressing the component, providing the triggering PointerEvent.

```APIDOC
## Component Event: `onPressStart`

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

### Type
Event

### Parameters
- **event** (PointerEvent) - The triggering `PointerEvent`.

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

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

### Animating Elements on Press Start and End

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

Integrate `press` with `animate` to apply animations when a press gesture begins and reverts them when it ends. This example scales an element down on press and back up on release.

```JavaScript
press("button", (element) => {
  animate(element, { scale: 0.9 })

  return () => animate(element, { scale: 1 })
})
```

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

### Starting Drag from an External Element

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

Initiate a drag session from any element's `onPointerDown` event by calling the `start` method of the drag controls.

```javascript
<div onPointerDown={event => controls.start(event)} />
```

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

### onAnimationStart

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

A callback triggered when any animation (excluding layout animations) starts, receiving the target or variant name of the animation.

```APIDOC
## Event: @animationStart

### 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.

### Parameters
- **targetOrVariant** (String | Object) - The target or variant name of the started animation.

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

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

### Basic useInView Hook Usage in Vue

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

Demonstrates the fundamental setup of `useInView` with a Vue ref to track an element's visibility.

```Vue
<script setup>
import { useInView } from 'motion-v'

const domRef = ref()
const isInView = useInView(domRef)
</script>

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

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

### Log Motion Value 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 then `useMotionValueEvent` to log its changes to the console.

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

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

### Initializing useAnimate in Vue Script Setup

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

Calls `useAnimate` within a Vue `<script setup>` block to obtain the `scope` ref and `animate` function.

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

const [scope, animate] = useAnimate()
</script>
```

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

### Handle `onAnimationStart` callback in Vue Motion

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

Execute a callback when any animation starts, providing the target or variant name of the animation.

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

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

### Map Multiple Input/Output Ranges in JavaScript

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

This example shows how to use `transform` with multiple values in both input and output ranges to create a more complex mapping. The output range can be non-linear.

```javascript
const x = [-100, 0, 100, 200]
const opacity = [0, 1, 1, 0]
const transformer = transform(x, opacity)

transformer(-50) // 0.5
transformer(50) // 1
transformer(150) // 0.5
```

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

### Install Motion with mini animate function for Squarespace

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

Use this script in the Squarespace Footer box to import only the lightweight animate function, optimizing file size for better SEO.

```HTML
<script type="module" defer>
    import { animate } from "https://cdn.jsdelivr.net/npm/motion@11.13.5/mini/+esm"

    // Your animation code here
    animate("h1", { opacity: [0, 1] })
</script>
```

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

### onHoverStart

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

A callback function that fires when a pointer starts hovering over the component, provided with the triggering `PointerEvent`.

```APIDOC
## Event: @hoverStart

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

### Parameters
- **event** (PointerEvent) - The `PointerEvent` that triggered the hover start.

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

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

### Import animate function for tree-shaking with a bundler

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

This example shows how to import the `animate` function for use with a bundler like Vite or Rollup, enabling tree-shaking for optimized bundle sizes.

```JavaScript
import { animate } from "motion"

animate("header", { opacity: 1 })
```

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

### Animating Reorder List with AnimateView

Source: https://motion.dev/docs/react-animate-view

This example demonstrates animating a reorderable list by wrapping each item in `AnimateView` and configuring a `spring` transition for position changes.

```jsx
function ReorderList({ items }) {
  return (
    <div className="list">
      {items.map((item) => (
        <AnimateView
          key={item.id}
          transition={{ type: spring, bounce: 0.2 }}
        >
          <div className="list-item">{item.label}</div>
        </AnimateView>
      ))}
    </div>
  )
}
```

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

### Uninstalling Framer Motion and Installing Motion for React

Source: https://motion.dev/docs/react-upgrade-guide

Use these commands to replace `framer-motion` with `motion` when upgrading to Motion for React.

```bash
npm uninstall framer-motion
npm install motion
```

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

### Integrating useInView into a React Component

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

This example shows how to integrate `useInView` within a functional React component, linking a ref to both the hook and a `div` element.

```javascript
function Component() {
  const ref = useRef(null)
  const isInView = useInView(ref)

  return <div ref={ref} />
}
```

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

### Handling Press Start and End with Separate Callbacks

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

The initial callback handles the press start, and its returned function handles the press end. This structure clearly separates logic for the beginning and conclusion of a gesture.

```JavaScript
press(element, (element, startEvent) => {
  console.log("press start")
  
  return (endEvent) => {
    console.log("press end")
  }
})
```

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

### Animate Base UI ContextMenu Exit with Motion

Source: https://motion.dev/docs/base-ui

Demonstrates a complete setup for animating the exit of a Base UI `ContextMenu` by hoisting its `open` state, using `AnimatePresence` with `ContextMenu.Portal` (and `keepMounted`), and applying `exit` animations via a `motion.div`.

```javascript
function App() {
  const [open, setOpen] = useState(false)
  
  return (
    <ContextMenu.Root open={open} onOpenChange={setOpen}>
      <ContextMenu.Trigger>Open menu</ContextMenu.Trigger>
      <AnimatePresence>
        {open && (
          <ContextMenu.Portal keepMounted>
            <ContextMenu.Positioner>
              <ContextMenu.Popup
                render={
                  <motion.div
                    initial={{ opacity: 0, transform: "scale(0.9)" }}
                    animate={{ opacity: 1, transform: "scale(1)" }}
                    exit={{ opacity: 0, transform: "scale(0.9)" }}
                  />
                }
              >
                {/* Children */}
              </ContextMenu.Popup>
```

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

### onDragStart

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

Callback function that fires once when a drag gesture starts. Provided the triggering `PointerEvent` and an `info` object with drag details.

```APIDOC
## onDragStart

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

### Type
Event

### Parameters
- **event** (PointerEvent) - The origin pointer event.
- **info** (object) - An object containing drag information (same structure as `onDrag` info).

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

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

### Defining Input and Output Ranges for Value Mapping

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

Example of defining input and output arrays for `useTransform`'s value mapping feature.

```javascript
const input = [-100, 0, 100]
const output = [0, 1, 0]
```

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

### Add Motion+ Dependency to package.json

Source: https://motion.dev/docs/motion-plus-installation

Add this entry to your `package.json` to install the `@motionplus/core` package under the alias `motion-plus`, enabling direct imports.

```json
{
  "dependencies": {
    "motion-plus": "npm:@motionplus/core@^2.12.0"
  }
}
```

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

### Snapping Dragged Component to Cursor

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

Pass `snapToCursor: true` to the `start` method to make the `motion` component immediately snap to the cursor's position upon drag initiation.

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

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

### Pausing Video Playback with usePageInView

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

Use this example to automatically pause a video when the page is not in view and resume it when the page becomes active, optimizing performance and battery life.

```javascript
const videoRef = useRef(null)
const isInView = usePageInView()

useEffect(() => {
  const videoElement = videoRef.current
  if (!videoElement) return

  if (isInView) {
    videoElement.play()
  } else {
    videoElement.pause()
  }
}, [isInView])
```

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

### Basic `resize` Usage for Viewport and Elements

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

Illustrates the basic syntax for `resize`, showing how to monitor viewport changes or specific HTML elements.

```javascript
// Viewport
resize(() => {})

// Specific elements
resize("li", () => {})
```

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

### Adding a Change Event Listener to a Motion Value

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

This example demonstrates how to attach a `change` event listener to a `useMotionValue` instance, logging the latest value whenever it changes.

```javascript
const color = useMotionValue("#00f")

useMotionValueEvent(color, "change", (latest) => {
  console.log(latest)
})
```

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

### Configuring useInView with Options

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

Demonstrates passing an options object to `useInView` to customize its behavior, such as the `once` option.

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

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

### Basic LazyMotion Usage with domAnimation

Source: https://motion.dev/docs/react-lazy-motion

Integrate `LazyMotion` with `domAnimation` and the `m` component to enable on-demand loading of animation features, significantly reducing initial bundle size. This setup demonstrates synchronous loading of features.

```javascript
import { LazyMotion, domAnimation } from "motion/react"
import * as m from "motion/react-m"

export const MyComponent = ({ isVisible }) => (
  <LazyMotion features={domAnimation}>
    <m.div animate={{ opacity: 1 }} />
  </LazyMotion>
)
```

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

### Defining Easing with Named Strings or Bezier Arrays

Source: https://motion.dev/docs/easing-functions

These examples demonstrate how to specify easing using either a named string (e.g., "easeIn") or a cubic Bezier array directly within Motion's animation configuration.

```javascript
// Named easing
ease: "easeIn"

// Bezier curve
ease: [0.39, 0.24, 0.3, 1]
```

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

### Install Motion with standard animate function on Squarespace

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

Add this script to the Footer box in Squarespace's Custom Code Injection to include the full Motion library and animate elements.

```HTML
<script type="module" defer>
    import { animate } from "https://cdn.jsdelivr.net/npm/motion@11.13.5/+esm"

    // Your animation code here
    animate("h1", { opacity: [0, 1] })
</script>
```

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

### Detecting Hover Start and End with CSS Selector

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

Use this snippet to detect when a hover gesture starts and ends on elements matching a CSS selector. The start callback receives the hovered element, and the optional return callback fires when the hover ends.

```javascript
hover(".button", (element) => {
  console.log("hover started on", element)

  return () => console.log("hover end")
})
```

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

### Importing the `resize` Function

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

Shows how to import the `resize` function from the Motion library.

```javascript
import { resize } from "motion"
```

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

### Subscribe to Motion Value Events with Auto-Cleanup

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

This example demonstrates how to use `useMotionValueEvent` to subscribe to `animationStart` and `change` events on a motion value `x`, logging updates to the console. Event handlers are automatically cleaned up when the component unmounts.

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

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

### Import useVelocity

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

Import the `useVelocity` function from the `motion-v` library to begin tracking motion value velocities.

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

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

### ScrambleText with Staggered Duration and Start Delay

Source: https://motion.dev/docs/react-scramble-text

Applies a staggered duration to `ScrambleText` using `motion`'s `stagger` function, revealing characters sequentially with a specified start delay.

```jsx
import { stagger } from "motion"
import { StaggerText } from "motion-plus/react"

// Start scrambling at the same time, reveal after 1
// second, with a 0.05 delay between each character/
<ScrambleText duration={stagger(0.05, { startDelay: 1 })} >
  Hello world!
</ScrambleText>
```

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

### Accessing Element and PointerEvent on Press Start

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

The press start callback receives the pressed element and the triggering `PointerEvent`. This allows access to event details like client coordinates.

```JavaScript
press("div:nth-child(2)", (element, startEvent) => {
  console.log("Pressed", element)
  console.log("At", startEvent.clientX, startEvent.clientY)
})
```

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

### Accessing Element and PointerEvent on Hover Start

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

The hover start callback receives both the hovered `element` and the triggering `PointerEvent`, allowing access to event details like client coordinates.

```javascript
hover("div:nth-child(2)", (element, startEvent) => {
  console.log("Hover started on", element)
  console.log("At", startEvent.clientX, startEvent.clientY)
})
```

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

### Detecting Press Start on a Single Element

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

Attach a press gesture listener directly to a specific DOM element using its ID. The callback fires when the press gesture starts on that element.

```JavaScript
press(
  document.getElementById("my-id"),
  () => {
    console.log("my-id pressed!")
  }
)
```

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

### Motion 12.0 Gesture Callbacks with Element and Event Arguments

Source: https://motion.dev/docs/upgrade-guide

This snippet demonstrates the updated API for `press`, `hover`, and `inView` gestures in Motion 12.0, where the start callback now receives the target element as its first argument.

```JavaScript
press("a", (element, startEvent) => {
  return (endEvent) => {}
})
  
hover("li", (element, startEvent) => {
  return (endEvent) => {}
})
  
inView("section", (element, startEntry) => {
  return (endEntry) => {}
})
```

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

### Initiate Dragging with `dragControls` in Vue Motion

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

Use `dragControls` to programmatically start a drag gesture from a different component than the draggable one. The `start` method is called on a pointer event to begin dragging.

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

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

### Importing the Slim `m` Component for Motion

Source: https://motion.dev/docs/react-reduce-bundle-size

Use this import to replace the default `motion` component, enabling a smaller initial bundle size by deferring feature loading.

```javascript
import * as m from "motion/react-m"
```

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

### Vue Component using useAnimationFrame

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

Integrates `useAnimationFrame` within a Vue 3 `<script setup>` component to animate a referenced DOM element, demonstrating setup and usage with `time` and `delta` arguments.

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

const domRef = ref()

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

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

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

### Creating a Motion Template with useMotionTemplate

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

Initializes a motion value `x` and then uses `useMotionTemplate` to create a new motion value `transform` that interpolates `x` into a CSS transform string.

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

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

### Implementing Radix Exit Animations with `AnimatePresence` and `forceMount`

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

Combine `AnimatePresence` with external state and `Tooltip.Portal forceMount` to enable exit animations for Radix components, ensuring children are rendered for animation tracking.

```jsx
<AnimatePresence>
  {isOpen && (
    <Tooltip.Portal forceMount>
      <Tooltip.Content asChild>
        <motion.div
            exit={{ opacity: 0 }}
```

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

### Detecting Press Start on Multiple Elements via CSS Selector

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

Use a CSS selector to apply a press gesture listener to multiple elements. The callback will execute for each element that matches the selector when a press starts.

```JavaScript
press("a", () => console.log("link pressed"))
```

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

### Detecting Press Start and End on a CSS Selector

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

Use `press` with a CSS selector to detect when a press gesture starts and ends on matching elements. The returned function from the callback is executed when the press gesture concludes.

```JavaScript
press("button", (element) => {
  console.log("press started on", element)

  return () => console.log("press ended")
})
```

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

### Basic Tagged Template Syntax for useMotionTemplate

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

Illustrates the basic syntax of `useMotionTemplate` as a tagged template literal, which is the correct way to invoke it.

```javascript
useMotionValue``
```

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

### get()

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

Returns the latest state of the motion value.

```APIDOC
## get()

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

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

### AI Kit Documentation Search Prompt

Source: https://motion.dev/docs/ai-kit-context

Uses the AI Kit's `/motion` skill to search documentation for a specific topic, such as `useTransform`.

```prompt
/motion eli5 on useTransform
```

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

### Import mini animate function for smaller filesize via CDN

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

Import the mini version of the `animate` function from Motion to achieve greater filesize savings. This version is 2.3kb and should be placed in the 'Before <body> tag' dialog.

```html
<script type="module">
  import { animate } from "https://cdn.jsdelivr.net/npm/motion@11.13.5/mini/+esm"
</script>
```

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

### useTransform ease option with easing functions

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

Shows how to apply easing functions to `useTransform` using both predefined easing functions and custom cubic bezier functions.

```javascript
<script setup>
import { cubicBezier, circOut, useTransform } from 'motion-v'

const y = useTransform(x, [0, 1], [0, 2], { ease: circOut })

const z = useTransform(
  x,
  [0, 1],
  [0, 2],
  { ease: cubicBezier(0.17, 0.67, 0.83, 0.67) }
)
</script>
```

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

### Original animation with separate scale and rotate

Source: https://motion.dev/docs/motionscore-code-audit

An example of an animation where `scale` and `rotate` are animated separately, which can be optimized.

```jsx
<motion.div
  animate={{
    scale: [1, 2, 2, 1, 1],
    rotate: [0, 0, 180, 180, 0],
    borderRadius: ["0%", "0%", "50%", "50%", "0%"],
  }}
  transition={{ repeat: Infinity }}
/>
```

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

### Creating a Spring Generator

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

Initialize a spring generator by providing two numerical `keyframes` for the animation range.

```javascript
const generator = spring({ keyframes: [0, 100] })
```

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

### Transform Function Example

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

Defines a new motion value by applying a transform function to an existing motion value.

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

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

### Importing splitText from motion-plus

Source: https://motion.dev/docs/split-text

Import the `splitText` utility into your JavaScript project after installing Motion+ to begin using its functionality.

```javascript
import { splitText } from "motion-plus"
```

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

### Basic `LazyMotion` Usage with `domAnimation`

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

Demonstrates how to use `LazyMotion` with the `m` component to load the `domAnimation` feature package, enabling basic DOM animations.

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

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

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

### Configuring Spring `keyframes`

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

Define the start and end numerical values for the spring animation using the `keyframes` option.

```javascript
spring({ keyframes: [0, 100] })
```

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

### Using mirrorEasing to Create an In-Out Easing Function

Source: https://motion.dev/docs/easing-functions

Import `mirrorEasing` to accept an easing function and return a new one that mirrors it, transforming an 'ease in' function into an 'ease in-out' function.

```javascript
import { mirrorEasing } from "motion"

const powerIn = (progress) => progress * progress

const powerInOut = mirrorEasing(powerInOut)
```

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

### Importing useInView in Vue

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

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

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

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

### Define Spring Initial Velocity in Vue Motion

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

Sets the initial velocity of the spring animation, influencing its starting momentum.

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

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

### Handling `onPanStart` Event in Vue Motion

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

The `onPanStart` callback fires when a pan gesture begins, providing the triggering `PointerEvent` and `info` object.

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

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

### Applying Transition to layout Prop (Framer Motion 2.0)

Source: https://motion.dev/docs/react-upgrade-guide

Illustrates how to apply a transition to the layout prop using the standard transition prop in Framer Motion 2.

```javascript
// After
<motion.div layout transition={{ duration: 2 }} />
```

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

### Handle `onHoverStart` callback in Vue Motion

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

Trigger a callback function when a pointer starts hovering over the component, receiving the `PointerEvent`.

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

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

### useInView with 'initial' Option

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

Use the `initial: true` option to set a default return value for `isInView` until the element's visibility has been measured.

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

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

### Call a Transformer Function in JavaScript

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

Invoke the previously created transformer function with an input value to get the mapped output.

```javascript
transformer(50) // 180
```

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

### Handling `onPressStart` Event in Vue Motion

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

The `onPressStart` callback fires when a pointer begins pressing the component, providing the triggering `PointerEvent`.

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

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

### Set Motion Value State (JavaScript)

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

Sets the motion value to a new state. This example demonstrates setting a color value.

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

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

### Configuring Default View Transition

Source: https://motion.dev/docs/react-animate-view

Set a default transition for all view animations using the `transition` prop, accepting Motion's transition options.

```jsx
<AnimateView transition={{ duration: 1, ease: "easeOut" }}>
  <div className="box" />
</AnimateView>
```

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

### Run MotionScore audit on a specific page

Source: https://motion.dev/docs/motionscore-code-audit

Execute a performance audit on a designated page, such as the homepage, after the Motion AI Kit is installed.

```bash
/motion audit the homepage
```

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

### Initializing useSpring with Direct Control

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

`useSpring` can be initialized with a number or a unit-type string, creating a motion value that can be updated manually.

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

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

### useTransform with function and value mapping

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

Illustrates two primary ways to use `useTransform`: with a direct transform function or by mapping values between input and output ranges.

```javascript
// Transform function
const doubledX = useTransform(() => x.get() * 2)

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

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

### Getting a Motion Value's Current State in JavaScript

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

Retrieve the current value of a Motion Value using the `.get()` method.

```javascript
const latest = x.get() // 100
```

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

### Importing useAnimate from Motion React

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

Import `useAnimate` from either `motion/react-mini` for a smaller bundle or `motion/react` for the full library.

```javascript
// Mini
import { useAnimate } from "motion/react-mini"
```

```javascript
// Hybrid
import { useAnimate } from "motion/react"
```

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

### Implementing a Counter with AnimateNumber in React

Source: https://motion.dev/docs/react-animate-number

This example demonstrates a functional React component that increments a counter and displays the animated number using AnimateNumber.

```jsx
import { AnimateNumber } from "motion-plus/react"

function Counter() {
  const [count, setCount] = useState(0)

  return (
    <>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <AnimateNumber>{count}</AnimateNumber>
    </>
  )
}
```

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

### Create Spring Animation with Motion Mini

Source: https://motion.dev/docs/upgrade-guide

Configure spring animations by setting `type: spring` in the options object, passing spring-related properties directly to the animation options.

```javascript
import { animate } from "motion/mini"
import { spring } from "motion"

animate(
  element,
  { transform: "translateX(100px)" },
  { type: spring, stiffness: 400 }
)
```

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

### Example MotionScore animation breakdown report

Source: https://motion.dev/docs/motionscore-code-audit

Shows the breakdown section of the report, detailing the absolute number and percentage of animations for each performance tier.

```text
## Breakdown

S █████████████████░░░░░░░░░  2 · 68%
A ░░░░░░░░░░░░░░░░░░░░░░░░░░  0 ·  0%
B ░░░░░░░░░░░░░░░░░░░░░░░░░░  0 ·  0%
C ████████░░░░░░░░░░░░░░░░░░  1 · 32%
D ░░░░░░░░░░░░░░░░░░░░░░░░░░  0 ·  0%
F ░░░░░░░░░░░░░░░░░░░░░░░░░░  0 ·  0%
```

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

### Basic Usage of animateView with DOM Update

Source: https://motion.dev/docs/animate-view

Demonstrates how to use `animateView` by passing it a function that updates the DOM, triggering a view transition.

```javascript
let isOn = true

animateView(() => {
  isOn = !isOn
  container.style.justifyContent = isOn ? "flex-end" : "flex-start"
})
```

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

### Example MotionScore overall rank report

Source: https://motion.dev/docs/motionscore-code-audit

Illustrates the letter ranking section of the MotionScore report, showing the average performance of discovered animations.

```text
## Rank

:'██████::
'██... ██:
.██:::..::
. ██████::
:..... ██:
'██::: ██:
. ██████::
:......:::
```

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

### Set Minimum Constraint for Inertia Drag Transition (Vue)

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

Defines a lower boundary for the animation. The value will 'bump' against this minimum or spring to it if starting below.

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

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

### Asynchronous Loading of Features

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

Demonstrates how to asynchronously load features using dynamic imports with a bundler, defining features in a separate file and importing them dynamically into `LazyMotion`.

```javascript
// features.js
import { domAnimation } from "motion-v"
export default domAnimation
```

```vue
// index.js
const loadFeatures = import("./features.js")
  .then(res => res.default)

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

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

### Using the new layout Prop (Framer Motion 2.0)

Source: https://motion.dev/docs/react-upgrade-guide

Demonstrates the layout prop, which supersedes positionTransition and layoutTransition for layout animations in Framer Motion 2.

```javascript
// After
<motion.div layout />
```

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

### ScrambleText with Staggered Character Delay

Source: https://motion.dev/docs/react-scramble-text

Demonstrates staggering the start time for each character's scramble animation using the `delay` prop with `stagger`.

```jsx
// Chars start scrambling one-by-one, all reveal after 1s of scrambling
<ScrambleText delay={stagger(0.1)} duration={1}>
  Hello world!
</ScrambleText>
```

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

### Getting a Motion Value's Velocity in JavaScript

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

Access the current velocity of a Motion Value using `.getVelocity()`. This is useful for physics-based animations.

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

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

### useInView with 'once' Option

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

Configure `useInView` with the `once: true` option to stop observing the element and always return `true` after it enters the viewport for the first time.

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

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

### Responding to Element Resize with Motion Frameloop

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

Demonstrates how to perform DOM writes in response to size changes using `frame.render` for optimal performance and to prevent layout thrashing.

```javascript
resize(".drawer", (element, { width, height }) => {
  frame.render(() => {
    element.style.height = Math.max(400, height)
  })
})
```

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

### Changing Reorder.Group Render Element in Vue

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

Illustrates how to change the underlying HTML element rendered by `Reorder.Group` using the `as` prop, for example, from `<ul>` to `<ol>`.

```vue
<Reorder.Group as="ol">
```

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

### Accordion Without LayoutGroup

Source: https://motion.dev/docs/react-layout-group

This example shows an Accordion component where sibling ToggleContent components do not coordinate layout animations, leading to uncoordinated visual updates.

```javascript
function Accordion() {
  return (
    <>
      <ToggleContent />
      <ToggleContent />
    </>  
  )
}
```

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

### Applying Easing to mix() Progress

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

Demonstrates how to apply an easing function, like `easeInOut`, to the progress value before passing it to a mixer function.

```javascript
import { mix, easeInOut } from "motion"

const mixNumber = mix(0, 100)

mixNumber(easeInOut(0.75))
```

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

### Configuring Drag Distance Threshold

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

Adjust the `distanceThreshold` option in the `start` method to specify the minimum cursor travel required before a drag gesture initializes.

```javascript
controls.start(event, { distanceThreshold: 10 })
```

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

### Disabling Automatic Drag on motion Component

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

Prevent the `motion` component from automatically starting a drag gesture on its own `pointerdown` event by setting `dragListener={false}`.

```javascript
<motion.div
  drag
  dragListener={false}
  dragControls={controls}
/>
```

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

### Motion Animation Interruption

Source: https://motion.dev/docs/improvements-to-the-web-animations-api-dx

Shows how Motion automatically interrupts and animates to new target values when a new animation starts on an already animating property.

```javascript
animate(
  element,
  { transform: "translateX(300px)" },
  { duration: 2, iterations: Infinity }
)
  
setTimeout(() => {
  animate(element, { transform: "none" }, { duration: 500 })
}, 500)
```

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

### WAAPI Animation with Two Keyframes

Source: https://motion.dev/docs/improvements-to-the-web-animations-api-dx

Defines a Web Animations API animation with explicit start and end keyframes, required by older WAAPI specifications.

```javascript
element.animate({ opacity: [0.2, 1] })
```

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

### Implement CSS transition fallbacks with `spring()`

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

Provide a fallback CSS transition with lower specificity that browsers can use if they don't support the `linear()` easing generated by `spring()`.

```css
transition: filter 0.3s ease-out;
transition: filter ${spring(0.3)};
```

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

### Vue Component with useTime and useTransform

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

Use `useTime` to get an elapsed time motion value and `useTransform` to map it to a continuous rotation for a `<motion.div>` element.

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

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

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

### Configure Motion+ Token in GitHub Actions CI

Source: https://motion.dev/docs/motion-plus-installation

Example of exposing the `MOTION_TOKEN` as an environment variable in a GitHub Actions workflow step, using a GitHub secret.

```yaml
- run: npm ci
  env:
    MOTION_TOKEN: ${{ secrets.MOTION_TOKEN }}
```

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

### Composing useTime with useTransform

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

Illustrates how to combine `useTime` with `useTransform` to create a continuous animation, mapping elapsed time to a rotation value over a 4-second cycle.

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

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

### Configure Default Transition with MotionConfig in React

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

Use `MotionConfig` to apply a default transition to all child `motion` components, simplifying animation setup across your application.

```javascript
import { motion, MotionConfig } from "motion/react"

export const MyComponent = ({ isVisible }) => (
  <MotionConfig transition={{ duration: 1 }}>
    <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
      />
  </MotionConfig>
)
```