Motion

https://motion.dev/docs
Admin
Motion is an animation library for React, JavaScript, and Vue that provides powerful tools for...
Tokens:275,824
Snippets:3,515
Trust Score:9.7
Update:14 hours ago
Show doc for...
Tokens:
Raw
### Install Motion and run motion-ai

Source: https://motion.dev/

Install the Motion package and run the motion-ai command to get started.

```bash
npm install motion && npx motion-ai
```

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

### Install Codex SDK and login

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

Codex needs its SDK installed separately. Run these commands to install the SDK and log in.

```bash
npm install -D @openai/codex-sdk
npx codex login
```

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

### Using `at` to start at the same time as previous animation

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

Pass `"<"` to start an animation at the same time as the previous segment. This example shows the `li` animation starting simultaneously with the `nav` animation.

```javascript
const sequence = [
  ["nav", { x: 100 }, { duration: 1 }],

  // This will start at the same time as the x: 100 animation
  ["li", { opacity: 1 }, { at: "<" }],
]
```

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

### Basic useScroll example

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

Shows how to use useScroll to get scrollYProgress and apply it to a motion.div's scaleX style.

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

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

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

### Install Motion AI Kit

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

Run this command to install the Motion AI Kit. It prompts whether to install for the current project or globally, and which agents to set up.

```bash
npx motion-ai
```

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

### Install motion and three

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

Install the `motion` package alongside Three.js to use `motion/three`.

```bash
npm install motion three
```

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

### Install Claude SDK and login

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

Claude needs its SDK and Claude Code sign-in. Run these commands to install the SDK and authenticate. If the Claude command is missing, install Claude Code.

```bash
npm install -D @anthropic-ai/claude-agent-sdk
claude auth login
```

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

### Provide token and install Motion UI

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

Export the MOTION_TOKEN environment variable and run npm install (or pnpm install / bun install). Semver ranges work like any npm package: ^2.12.0, 2.12.0, latest.

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

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

### Install motion and vgpu

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

Install the motion package alongside vgpu to use the motion/vgpu integration.

```bash
npm install motion vgpu
```

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

### Install Lenis alongside Motion

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

Install Lenis alongside Motion using npm.

```bash
npm install motion lenis
```

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

### Start Motion Studio server for Next.js

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

In a second terminal, start the Studio server from the same app directory. Keep both commands running. Studio uses http://localhost:5200 by default.

```bash
npx motion-studio serve
```

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

### Install motion package

Source: https://motion.dev/docs/layout-animations

Install the motion package to use animateLayout. Requires motion@14.1.0 or above.

```bash
npm install motion
```

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

### Full example of AnimateView with startTransition

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

Complete example showing how to use AnimateView with startTransition to toggle an element's visibility with a view transition.

```jsx
import { AnimateView } from "motion/react-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>
      )}
    </>
  )
}
```

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

### onDragStart callback example

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

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

```jsx
<motion.div drag onDragStart={(event, info) => console.log(info.delta.x)} />
```

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

### Install motion-studio package with npm

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

Run this command from your app's directory to install Motion Studio as a dev dependency. Use your project's package manager if it uses Yarn, pnpm, or Bun.

```bash
npm install -D motion-studio
```

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

### Install Motion via pnpm

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

Install Motion using pnpm. Requires React 18.2 or higher.

```bash
pnpm add motion
```

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

### onAnimationStart

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

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.

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

### Type
(definition: string | object) => void

### Example
```jsx
<motion.circle
  animate={{ r: 10 }}
  onAnimationStart={latest => console.log(latest.r)}
/>
```
```

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

### Install Motion via Yarn

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

Install Motion using Yarn. Requires React 18.2 or higher.

```bash
yarn add motion
```

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

### Basic hover example with start and end callbacks

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

Attaches a hover gesture to elements matching the CSS selector ".button". The start callback logs the hovered element, and the returned function logs when the hover ends.

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

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

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

### Setup motion components with Base UI Menu Trigger

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

Use the render prop to replace Base UI's default DOM element with a motion component. This example shows a Menu.Trigger rendering a motion.button with initial, animate, and whilePress props.

```jsx
import { Menu } from "@base-ui-components/react/menu"
import { motion } from "motion/react"

function Component() {
  return (
    <Menu.Trigger render={
      <motion.button
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        whilePress={{ scale: 0.9 }}
      />
    } />
  )
}
```

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

### Handle animation start with @animationStart

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

The `onAnimationStart` callback is triggered when any animation (except layout animations) starts. It receives the target or variant name of the started animation.

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

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

### Install Motion plugin for Cursor via deeplink

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

Use this one-click install link to add the Motion plugin for Cursor. The plugin is free and requires no token, account, or configuration.

```text
cursor://anysphere.cursor-deeplink/prompt?text=Install%20the%20Motion%20plugin%20for%20Cursor.%0A%0AIt%20is%20on%20GitHub%20at%20https%3A%2F%2Fgithub.com%2Fmotiondivision%2Fcursor-plugin%20and%20needs%20no%20token%2C%20no%20account%20and%20no%20configuration.%0A%0A1.%20Clone%20it%20to%20a%20temporary%20directory%3A%0A%0Agit%20clone%20--depth%201%20https%3A%2F%2Fgithub.com%2Fmotiondivision%2Fcursor-plugin%20%2Ftmp%2Fmotion-cursor-plugin%0A%0A2.%20Copy%20the%20plugin%20into%20Cursor%27s%20local%20plugin%20directory%3A%0A%0Amkdir%20-p%20~%2F.cursor%2Fplugins%2Flocal%0Arm%20-rf%20~%2F.cursor%2Fplugins%2Flocal%2Fmotion%0Acp%20-R%20%2Ftmp%2Fmotion-cursor-plugin%2Fplugins%2Fmotion%20~%2F.cursor%2Fplugins%2Flocal%2Fmotion%0Arm%20-rf%20%2Ftmp%2Fmotion-cursor-plugin%0A%0A3.%20Verify%20~%2F.cursor%2Fplugins%2Flocal%2Fmotion%2F.cursor-plugin%2Fplugin.json%20exists%20and%20names%20the%20plugin%20%22motion%22.%0A%0ADo%20not%20touch%20any%20other%20plugin%20in%20that%20directory%2C%20and%20do%20not%20edit%20~%2F.cursor%2Fmcp.json%3A%20the%20plugin%20brings%20its%20own%20MCP%20server.%0A%0AThen%20tell%20me%20to%20fully%20restart%20Cursor%2C%20and%20to%20enable%20Motion%20under%20Settings%20%3E%20Plugins%20if%20it%20is%20not%20already%20on.
```

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

### Uninstall framer-motion and install motion

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

Run these commands to upgrade to Motion for React from framer-motion.

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

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

### steps with start

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

By default, the "steps" change at the end of a step, this can be changed by passing "start" to steps:

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

easing(0.2) // 0.25
```

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

### Using `at` relative to the start of previous animation

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

Pass a string starting with `<+` or `<-` to start an animation relative to the start of the previous animation. Positive values start after, negative values start before the start.

```javascript
const sequence = [
  ["nav", { opacity: 1 }],

  // 0.5 seconds after the start animation (0.5 secs):
  ["nav", { x: 100 }, { at: "<0.5" }],

  // 0.2 seconds before the start of the previous animation (0.3 secs):
  ["nav li", { opacity: 1 }, { at: "<-0.2" }],
]
```

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

### onPanStart

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

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

```APIDOC
## onPanStart

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

### Type
(event: PointerEvent, info: PanInfo) => void

### Example
```jsx
<motion.div onPanStart={(event, info) => console.log(info.delta.x)} />
```
```

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

### Install Motion+ MCP Server

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

Motion+ members can add the Motion+ MCP server by running this command. After installation, sign in to the Motion+ MCP server from your agent's MCP settings.

```bash
npx motion-ai --plus
```

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

### onPressStart

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

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

```APIDOC
## onPressStart

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

### Type
Function

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

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

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

### Basic useVelocity example with drag and scale transform

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

Use useVelocity to create a motion value that tracks the velocity of another motion value. The example combines useMotionValue, useVelocity, and useTransform to map velocity to 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>
```

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

### Full example: useAnimate with scoped selector

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

Complete example showing useAnimate with a scoped selector to animate list items when the component mounts.

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

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

### onLayoutAnimationStart

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

A callback function that runs when a layout animation starts.

```APIDOC
## onLayoutAnimationStart

### Description
A callback to run when a layout animation starts.

### Type
`() => void`

### Example
```jsx
<motion.div layout onLayoutAnimationStart={() => console.log('start')} />
```
```

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

### Log animation start with onAnimationStart callback

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

The `onAnimationStart` callback is triggered when any animation (except layout animations) starts, providing the target or variant name.

```jsx
<motion.circle
  animate={{ r: 10 }}
  onAnimationStart={latest => console.log(latest.r)}
/>
```

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

### onPanStart callback

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

onPanStart fires when a pan gesture starts, providing the triggering PointerEvent and info object.

```jsx
<motion.div onPanStart={(event, info) => console.log(info.delta.x)} />
```

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

### useTransform clamp option example

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

Demonstrates the clamp option. When clamp is false, the output continues mapping beyond the input range. The example shows y clamped to 2 and z unclamped to 4 when x is set to 2.

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

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

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

### Install Motion for Vue via npm

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

Install the motion-v package using npm to add Motion for Vue to your project.

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

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

### Basic sequence example

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

A sequence is an array of `animate` definitions. Each definition plays one after the other by default.

```javascript
const sequence = []

animate(sequence)
```

```javascript
const sequence = [
  ["ul", { opacity: 1 }, { duration: 0.5 }],
  ["li", 100, { ease: "easeInOut" }]
]
```

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

### onTapStart

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

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

```APIDOC
## onTapStart

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

### Type
(event: PointerEvent) => void

### Example
```jsx
<motion.div onTapStart={(event) => console.log(event)} />
```
```

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

### onPressStart callback

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

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

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

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

### Upgrade Motion AI Kit

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

Re-run the installer at the same scope to upgrade. It rewrites the installed skills and the motion MCP configuration in place. Add --plus to also update the Motion+ server.

```bash
npx motion-ai@latest
```

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

### Read a motion value with the get method

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

Use the `get` method to read the current value of a motion value. This example reads the value and comments the expected result.

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

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

### Calculate progress with start, end, and value

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

`progress` accepts the start of the range, the end of the range, and a value. The example shows progress(100, 200, 150) returning 0.5.

```javascript
progress(100, 200, 150) // 0.5
```

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

### useInView with once option

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

Example of using the once option to stop observing after the element enters the viewport.

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

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

### Using `at` with a specific time

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

Set `at` to a number to start an animation at a specific time (in seconds) from the beginning of the sequence. In this example, the second animation starts 0.5 seconds after the sequence begins.

```javascript
const sequence = [
  ["nav", { opacity: 1 }],

  // This will start 0.5 from the start of the whole animation:
  ["nav", { x: 100 }, { at: 0.5 }],
]
```

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

### Default sequence timing

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

By default, each animation in a sequence starts after the previous one completes. This example shows a basic sequence where the `li` animation starts after the `ul` opacity animation finishes.

```javascript
const sequence = [
  ["ul", { opacity: 1 }],
  // This will start when ul opacity is 1
  ["li", { x: [-100, 0] }]
]
```

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

### Motion scroll offset array with start and end keywords

Source: https://motion.dev/docs/migrate-from-gsap-to-motion

Motion's scroll function accepts a single offset array using axis-agnostic 'start' and 'end' keywords. This example shows an offset that exits the viewport top.

```javascript
scroll(callback, {
  target: element,
  offset: ["start start", "end start"] // Exits the viewport top
})
```

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

### Automatically end existing animation when starting new one

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

When you start a new animation on a motion value, any existing animation is automatically ended. This example shows animating a color motion value twice, with the second animation cancelling the first.

```javascript
const color = motionValue("#f00")

animate(color, "#0f0")

animate(color, "#333") // Will automatically end the existing animation
```

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

### Import wrap from Motion

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

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

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

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

### Call the transformer with an input value

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

Call the transformer function with an input value to get the mapped output. The example maps 50 to 180.

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

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

### Import useInView from motion/react

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

Import useInView from Motion.

```javascript
import { useInView } from "motion/react"
```

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

### Get the latest value with .get

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

Read the current value of a Motion Value using `.get()`. The example shows reading after setting to 100.

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

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

### Hover callback with element and PointerEvent

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

The hover start callback receives the hovered element and the triggering PointerEvent. This example logs the element and the pointer coordinates.

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

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

### Delay child animations with delayChildren

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

Use delayChildren on a parent variant to delay the start of child animations by a specified duration in seconds. The example delays children by 0.5 seconds.

```jsx
const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      delayChildren: 0.5
    }
  }
}

const item = {
  hidden: { opacity: 0 },
  show: { opacity: 1 }
}

return (
  <motion.ul
    variants={container}
    initial="hidden"
    animate="show"
  >
    <motion.li variants={item} />
    <motion.li variants={item} />
  </motion.ul>
)
```

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

### Import useAnimate from motion/react-mini or motion/react

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

Shows the import paths for `useAnimate` from the Mini and Hybrid packages.

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

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

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

### Import mix from Motion

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

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

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

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

### Calculate progress of a value within a range

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

Returns how far a value is through a range, where 0 is the start and 1 is the end. The example shows progress(0, 200, 50) returning 0.25.

```javascript
progress(0, 200, 50) // 0.25
```

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

### Tab and TabRow components with layoutId

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

Tab component renders an element with layoutId="underline" when selected. TabRow renders multiple Tab components. This example shows the setup before namespacing with LayoutGroup.

```vue
<!-- Tab -->
<template>
  <li>
      {{label}}
      <motion.div v-if="isSelected" layoutId="underline" />
    </li> 
</template>

<!-- TabRow -->
<template>
  <Tab v-for="item in items" :key="item.id" v-bind="item"/>
</template>
```

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

### Basic resize usage for viewport and elements

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

Shows how to call resize with a callback for viewport changes or with a selector for specific elements.

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

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

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

### Handle values outside the range

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

`progress` doesn't limit its output. A value before the start returns less than 0, and a value after the end returns more than 1. The example shows progress(0, 100, 150) returning 1.5 and progress(0, 100, -50) returning -0.5.

```javascript
progress(0, 100, 150) // 1.5
progress(0, 100, -50) // -0.5
```

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

### Using `at` relative to the end of previous animation

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

Pass a string starting with `+` or `-` to start an animation relative to the end of the previous animation. Positive values start after, negative values start before the end.

```javascript
const sequence = [
  ["nav", { opacity: 1 }, { duration: 1 }],

  // 0.5 seconds after the previous animation (1.5 secs):
  ["nav", { x: 100 }, { at: "+0.5" }],

  // 0.2 seconds before the end of the previous animation:
  ["nav li", { opacity: 1 }, { at: "-0.2" }],
]
```

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

### Import useSpring from Motion

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

Import useSpring from Motion.

```javascript
import { useSpring } from "motion/react"
```

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

### Import hover from motion

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

Shows how to import the `hover` function from the "motion" package.

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

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

### Negative delay to start mid-animation

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

Set a negative `delay` to start an animation midway through its duration.

```javascript
animate(
  element,
  keyframes,
  // Will start half-way through the animation
  { delay: -1, duration: 2 }
)
```

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

### Import AnimateView and startTransition from motion-v

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

AnimateView and startTransition are available via motion-v 2.5 and later. Import them to use view transitions.

```javascript
import { AnimateView, startTransition } from "motion-v"
```

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

### Using wrap for pagination

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

Demonstrates using `wrap` to create a looping index for next/previous pagination. The index is wrapped between 0 and the number of items.

```javascript
const index = wrap(0, numItems, currentIndex + 1)
```

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

### Allow custom local hostname origin for Motion Studio companion server

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

Use this command to allow a custom local hostname origin when starting the Motion Studio companion server. The page must be able to reach the companion server; use a local HTTPS proxy if your browser blocks an HTTP server from an HTTPS page.

```bash
npx motion-studio serve --origin https://app.local:3000
```

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

### Detect press start on an element

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

Call `press` with an element and a callback to detect when a press starts on that element.

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

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

### Upgrade Motion with AI Kit command

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

Run this command after installing the Motion AI Kit to automatically upgrade Motion.

```bash
/motion upgrade
```

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

### Import curtains and wipe from motion-plus/curtains

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

Import the `curtains` and `wipe` functions from the `motion-plus/curtains` package to use page transitions.

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

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

### Delay stagger with scrambleText

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

Stagger when each character starts scrambling. Chars start scrambling one-by-one, all reveal after 1s.

```javascript
// Chars start scrambling one-by-one, all reveal after 1s
scrambleText(element, {
  delay: stagger(0.1),
  duration: 1
})
```

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

### Start drag from onPointerDown event

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

Use the start method of the controls to initiate a drag from any element's onPointerDown event.

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

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

### Use a saved transition with an AI agent

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

This example shows how to instruct an AI agent to apply a saved transition named "bounce out". Use it when you want to reuse a shared transition in your project.

```text
use my "bounce out" transition
```

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

### viewport options example

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

Options to define how the element is tracked within the viewport. Use once to only trigger once, root to specify a scrollable ancestor, margin to adjust detection area, and amount to set how much of the element must be visible.

```jsx
<motion.section
  whileInView={{ opacity: 1 }}
  viewport={{ once: true }}
/>
```

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

### Start drag from pointerdown event

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

Call the `start` method on the drag controls from any element's `pointerdown` event to initiate a drag session.

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

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

### Stagger delay

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

Stagger when each character starts scrambling by passing stagger to delay. Chars start scrambling one-by-one, all reveal after 1s of scrambling.

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

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

### Get and set animation time

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

The `time` property gets or sets the current time of the animation in seconds. Setting it seeks the animation to that time.

```javascript
const animation = animate(x, 100, { duration: 1 })

// Set animation time to 0.5 seconds
animation.time = 0.5

// Get animation time
console.log(animation.time) // 0.5
```

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

### Import curtains from motion-plus/curtains

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

Import the `curtains` function from the `motion-plus/curtains` package.

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

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

### Set Motion Studio agent provider to Cursor

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

Choose a provider in your project's .env.local. Supported values are cursor, codex, and claude. Cursor is the default. Studio reads .env.local on each request, so changes take effect without a restart.

```bash
MOTION_STUDIO_AGENT_PROVIDER=cursor
```

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

### Detect press start on multiple elements using CSS selector

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

Pass a CSS selector to `press` to detect press start on all matching elements.

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

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

### GSAP RotatingCube example with useGSAP

Source: https://motion.dev/docs/migrate-from-gsap-to-motion

GSAP's useGSAP hook animates a rotating cube with a 10-second duration and infinite repeat. This is the original example to be migrated.

```jsx
const RotatingCube = () => {
  const boxRef = useRef()

  useGSAP(() => {
    gsap.to(boxRef.current, {
      duration: 10,
      repeat: -1,
      rotation: 360,
    })
  })

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

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

### useTransform ease option example

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

Shows how to use the ease option with a built-in easing function (circOut) and a cubic bezier easing function. The easing functions must be JavaScript functions.

```javascript
import { cubicBezier, circOut } from "motion"
import { useTransform } from "motion/react"

// In your component
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) }
)
```

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

### Set initial delay with startDelay option

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

Use `startDelay` to set the initial delay from which subsequent delays are calculated. The default is `0`.

```javascript
stagger(0.1, { startDelay: 0.2 }) // 0.2, 0.3, 0.4...
```

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

### Get and set animation speed

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

The `speed` property gets or sets the playback rate. `1` is normal, `0.5` is half, `2` is double, and `-1` reverses playback.

```javascript
const animation = animate(element, { opacity: 0 })

const currentSpeed = animation.speed

// Double current speed
animation.speed = currentSpeed * 2
```

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

### Motion cubic bezier easing as shorthand array

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

Demonstrates Motion's shorthand array syntax for cubic bezier easing.

```javascript
animate(
  element,
  { transform: "translateX(50px)" },
  { ease: [0.29, -0.13, 0.18, 1.18] }
)
```

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

### Gallery with grid arrangement options

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

Configure the grid arrangement with options like columns, fill, rotateX, and bulge. Creates an infinite, pannable plane.

```jsx
<Gallery arrange={grid({ columns: 6, fill: "offset", rotateX: 20, bulge: 120 })} />
```

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

### Render with vgpu in Motion's render step

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

Use this to render vgpu content during Motion's render step. Motion writes to vgpu during preRender, so render in the render step.

```javascript
import { cancelFrame, frame } from "motion"
import { frame as vgpuFrame } from "vgpu"

function render() {
  vgpuFrame(gpu, (currentFrame) => {
    currentFrame.pass(canvasSurface, wave)
  })
}

frame.render(render, true)
```
Tokens:
Raw