Motion for React

https://motion.dev/docs/react
Admin
Motion for React is a production-grade animation library that combines native browser performance...
Tokens:26,663
Snippets:314
Trust Score:9.7
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Set MOTION_TOKEN and install dependencies

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

Exports the Motion+ access token to your environment before running npm install, pnpm install, or bun install.

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

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

### Install Motion using pnpm

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

Installs the motion package in a React project using pnpm. Requires React version 18.2 or higher.

```bash
pnpm add motion
```

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

### Install Motion using npm

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

Installs the motion package in a React project using npm. Requires React version 18.2 or higher.

```bash
npm install motion
```

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

### Install Motion using Yarn

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

Installs the motion package in a React project using Yarn. Requires React version 18.2 or higher.

```bash
yarn add motion
```

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

### Uninstall framer-motion and install motion

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

To upgrade to Motion for React, uninstall framer-motion and install motion.

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

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

### Run Motion AI Kit upgrade command

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

Install the Motion AI Kit and run the /motion upgrade command to automatically upgrade from your current version.

```bash
/motion upgrade
```

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

### LazyMotion with domAnimation (sync)

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

Example of using LazyMotion with synchronous feature loading via domAnimation.

```APIDOC
## [COMPONENT] LazyMotion

### Description
LazyMotion is a component that enables lazy-loading of animation features to reduce initial bundle size.

### Props

#### `features`
- **Type**: FeatureBundle (e.g., domAnimation) or a function returning a Promise
- **Required**: true
- **Description**: Define a feature bundle to load sync or async.

#### `strict`
- **Type**: boolean
- **Default**: false
- **Required**: false
- **Description**: If true, throws an error if a motion component renders within LazyMotion.

### Example (Sync loading)
```jsx
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>
)
```

### Example (Async loading)
```jsx
// features.js
import { domAnimation } from "motion/react"
export default domAnimation

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

function Component() {
  return (
    <LazyMotion features={loadFeatures}>
      <m.div animate={{ scale: 1.5 }} />
    </LazyMotion>
  )
}
```

### Example (strict prop)
```jsx
// This component will throw an error that explains using a motion component
// instead of the m component will break the benefits of code-splitting.
function Component() {
  return (
    <LazyMotion features={domAnimation} strict>
      <motion.div />
    </LazyMotion>
  )
}
```
```

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

### Responsive animation using CSS variables with Motion and Tailwind CSS

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

These two blocks form a responsive animation setup. The first defines a CSS variable --entry-distance-y with responsive values (20px on small screens, 50px on medium and above) and uses it as the initial y value. The second sets animate to animate y to 0 from that responsive start value. Motion can animate to and/or from CSS variables, so you can also animate to a responsive value or between responsive values.

```jsx
<motion.div
  className="
    p-8 bg-rose-500 text-white rounded-xl shadow-lg max-w-md mx-auto
    
    /* Define the CSS variable inline, with responsive values */
    [--entry-distance-y:20px] 
    md:[--entry-distance-y:50px]
  "
  initial={{ opacity: 0, y: "var(--entry-distance-y)" }}

```

```jsx
animate={{ opacity: 1, y: 0 }}
```

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

### Add motion-plus dependency in package.json

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

Installs the scoped package @motionplus/core under the alias motion-plus in package.json so documented import paths resolve correctly.

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

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

### Before: layoutTransition prop in Motion 1

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

In Framer Motion 1, layout animations were performed using the layoutTransition prop. This example shows the old syntax.

```jsx
// Before
<motion.div layoutTransition />
```

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

### AnimateNumber counter example

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

Example of a counter component using AnimateNumber. The component animates to the latest value when the number changes.

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

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

### Render scheduling test before v11

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

Previously, updates applied synchronously after mount, so tests could assert styles immediately after render. This example shows a test that expects opacity to be 1 right after rendering.

```javascript
render(
  <motion.div
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    transition={{ false }}
  />
)

expect(element).toHaveStyle("opacity: 1")
```

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

### Import Motion via jsDelivr CDN

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

Imports Motion directly from an external CDN without local installation. It is recommended to replace latest with a fixed version tag.

```html
<script type="module">
  import motion from "https://cdn.jsdelivr.net/npm/motion@latest/react/+esm"
</script>
```

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

### Basic hover and tap animation with Motion and Tailwind CSS

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

Use this button example to combine Tailwind CSS utility classes for static styling with Motion's whileHover and whileTap animation props for interactivity. Motion applies inline styles or native browser animations, which override Tailwind classes, so the separation keeps the two libraries working well together.

```jsx
import { motion } from "motion/react";

function Button() {
  return (
    <motion.button
      className="px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-lg"
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.9 }}
    >
      Click Me!
    </motion.button>
  );
}

```

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

### Basic useAnimate example

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

Basic usage of useAnimate: creates a scope ref and an animate function, then uses the animate function with a selector scoped to the component's children. The scope ref is attached to a <ul> element.

```jsx
function Component() {
  const [scope, animate] = useAnimate()

  useEffect(() => {
    // This "li" selector will only select children
    // of the element that receives `scope`.
    animate("li", { opacity: 1 })
  })
  
  return <ul ref={scope}>{children}</ul>
}
```

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

### onHoverStart and onHoverEnd events

Source: https://motion.dev/docs/react-hover-animation

Listen for hover start and end events. These events only fire on devices where hover is truly possible and won't fire as a result of touch events.

```jsx
<motion.a
  onHoverStart={() => console.log('Hover starts')}
  onHoverEnd={() => console.log('Hover ends')}
/>
```

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

### After: layout with transition prop

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

In Framer Motion 2, layout animations use the same default transition prop as other animations. This example shows the new syntax with a duration of 2 seconds.

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

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

### Control useAnimationFrame loops with usePageInView

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

Passes the animation callback to `useAnimationFrame` conditionally to start or stop animation loops based on tab visibility.

```javascript
useAnimationFrame(isPageInView ? update : undefined)
```

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

### Before: layoutTransition with transition argument

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

In Framer Motion 1, layoutTransition could take a transition object as an argument. This example shows the old syntax with a duration of 2 seconds.

```jsx
// Before
<motion.div layoutTransition={{ duration: 2 }} />
```

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

### After: layout prop in Motion 2

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

In Framer Motion 2, layoutTransition and positionTransition are superseded by the layout prop. This example shows the new syntax.

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

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

### Render scheduling test from v11

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

From version 11, render scheduling is moved to a microtask, so tests must await an animation frame. This example shows the updated test and a helper function using the frame API.

```javascript
render(
  <motion.div
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    transition={{ false }}
  />
)

await nextFrame()

expect(element).toHaveStyle("opacity: 1")
```

```javascript
// utils.js
import { frame } from "framer-motion"

export async function nextFrame() {
    return new Promise<void>((resolve) => {
        frame.postRender(() => resolve())
    })
}
```

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

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

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

Import useAnimate from either the Mini or Hybrid entry point of Motion.

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

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

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

### Configure spring transition options

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

Customize the spring physics by passing transition options such as `stiffness` in the second argument.

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

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

### Import useSpring from motion/react

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

Import the `useSpring` hook from the Motion package.

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

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

### Import usePageInView

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

Import the `usePageInView` hook from the `motion/react` module.

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

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

### Reverse composition with styled.div and motion.create

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

Reverse the composition so the styling library controls DOM prop forwarding, using styled.div and motion.create.

```jsx
const StyledDiv = styled.div`
    /* styles */
`
const MotionDiv = motion.create(StyledDiv)
```

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

### Track page visibility with usePageInView

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

Invokes the hook to track tab visibility. Defaults to `true` on the server and initial client render before measurement.

```javascript
const isPageInView = usePageInView()
```

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

### Basic AnimateActivity with mode prop

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

Shows how to wrap a motion.div with AnimateActivity and toggle the mode prop between 'visible' and 'hidden' to trigger enter and exit animations.

```jsx
<AnimateActivity mode={isVisible ? "visible" : "hidden"}>
  <motion.div
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    exit={{ opacity: 0 }}
  />
</AnimateActivity>
```

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

### whileHover prop for scale animation

Source: https://motion.dev/docs/react-hover-animation

Declaratively animate to a target state when hover starts. The component animates to the values defined in whileHover and back to its previous state when the gesture ends.

```jsx
<motion.button whileHover={{ scale: 1.1 }} />
```

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

### Define scroll intersection offsets for element entry and exit

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

Set intersection points between the target and container to define when progress starts and ends as an element enters or leaves the viewport.

```javascript
// Track an element as it enters from the bottom
const { scrollYProgress } = useScroll({
  target: targetRef,
  offset: ["start end", "end end"]
})

// Track an element as it moves out the top
const { scrollYProgress } = useScroll({
  target: targetRef,
  offset: ["start start", "end start"]
})
```

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

### Skip initial animation with skipInitialAnimation

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

Set `skipInitialAnimation` to `true` to jump to the initial value instantly on mount, which is useful when tracking values that measure the DOM like `useScroll`.

```javascript
const { scrollYProgress } = useScroll()
const smoothProgress = useSpring(scrollYProgress, {
  skipInitialAnimation: true,
})
```

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

### Configure default transition with MotionConfig

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

Sets global default transition settings for all nested motion components.

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

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

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

### Start drag session from another element pointer down event

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

Trigger a drag session externally by passing the pointer event to controls.start within an element's onPointerDown handler.

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

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

### Layout animation with borderRadius initial

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

In Framer Motion 1, layout animations could distort borderRadius and boxShadow properties. This example shows a motion.div with layout and an initial borderRadius of 20.

```jsx
<motion.div layout initial={{ borderRadius: 20 }} />
```

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

### Sequencing exit animations with variants

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

Shows how to use variants to sequence exit animations through a tree, using delayChildren and stagger.

```jsx
<AnimateActivity mode={isVisible ? "visible" : "hidden"}>
  <motion.ul
    exit="hidden"
    variants={{
      hidden: { delayChildren: stagger(0.1) }
    }}
  >
    {items.map(item => (
      <motion.li
        variants={{ hidden: { opacity: 0 }}}
      >
        {item.title}
      </motion.li>
    ))}
  </motion.ul>
</AnimateActivity>
```

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

### Import useMotionTemplate from motion/react

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

Imports the useMotionTemplate hook from the motion/react package.

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

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

### LazyMotion with domAnimation for sync loading

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

Use LazyMotion with the domAnimation feature bundle to reduce initial bundle size to 4.6kb. The m component is used instead of motion to enable lazy-loading.

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

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

### Velocity calculation before v11

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

In previous versions, setting a MotionValue multiple times within the same animation frame updated the value's velocity. This example shows that after setting x to 100 and then 200, getVelocity returns the velocity between the two updates.

```javascript
const x = motionValue(0)

requestAnimationFrame(() => {
  x.set(100)
  x.getVelocity() // Velocity of 0 -> 100
  x.set(200)
  x.getVelocity() // Velocity of 100 -> 200
})
```

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

### Generate CSS springs with Tailwind theme

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

Generate CSS spring easings with the Motion AI Kit and use them as Tailwind utility classes. The @theme block defines --ease-spring-snappy, --ease-spring, and --ease-spring-soft; the div applies the ease-spring-soft utility.

```css
@theme {
  --ease-spring-snappy: linear(0, 0.2375, 0.5904, 0.8358, 0.9599, 1.0061, 1.0152, 1.0116, 1.0062, 1.0025, 1.0006, 0.9999, 1);
  --ease-spring: linear(0, 0.0942, 0.2989, 0.5275, 0.73, 0.8839, 0.9858, 1.0425, 1.0655, 1.0666, 1.0558, 1.0405, 1.0255, 1.0131, 1.0043, 0.9989, 0.9962, 1);
  --ease-spring-soft: linear(0, 0.0332, 0.1241, 0.2583, 0.4207, 0.5967, 0.7729, 0.9379, 1.0826, 1.2006, 1.2883, 1.3445, 1.3701, 1.3679, 1.3423, 1.2983, 1.2415, 1.1774, 1.1113, 1.0477, 0.9904, 0.9421, 0.9047, 0.8789, 0.8648, 0.8615, 0.8677, 0.8815, 0.9009, 0.9239, 0.9485, 0.9727, 0.9952, 1.0146, 1.0303, 1.0417, 1.0487, 1.0515, 1.0506, 1.0465, 1.0401, 1.032, 1.023, 1.0138, 1.0051, 0.9974, 0.9909, 0.986, 0.9828, 0.9811, 0.9809, 0.9819, 0.984, 0.9868, 0.99, 0.9935, 0.9968, 0.9998, 1.0025, 1.0045, 1.006, 1.0069, 1.0072, 1.0069, 1.0063, 1.0054, 1.0042, 1.003, 1.0017, 1.0005, 0.9995, 0.9986, 0.998, 0.9976, 1);
}
```

```html
<div className="transition-transform duration-700 ease-spring-soft">
```

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

### Enable touch support for drag trigger element

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

Apply touch-action: none inline style to the triggering element to ensure drag initiation works on touch screens.

```javascript
<div onPointerDown={startDrag} style={{ touchAction: "none" }} />
```

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

### Exit animation with useAnimate and usePresence

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

Compose enter and exit animations using useAnimate with usePresence. When isPresent is false, the exit animation runs and safeToRemove is called to allow removal.

```jsx
import { useAnimate, usePresence } from "framer-motion"

function Component() {
  const [isPresent, safeToRemove] = usePresence()
  const [scope, animate] = useAnimate()
  
  useEffect(() => {
     if (isPresent) {
       const enterAnimation = async () => {
         await animate(scope.current, { opacity: 1 })
         await animate("li", { opacity: 1, x: 0 })
       }
       enterAnimation()

     } else {
       const exitAnimation = async () => {
         await animate("li", { opacity: 0, x: -100 })
         await animate(scope.current, { opacity: 0 })
         safeToRemove()
       }
       
       exitAnimation()
     }
  }, [isPresent])
  
  return (
    <ul ref={scope}>
      <li />
      <li />
      <li />
    </ul>
  )
}
```

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

### Import useTime from motion/react

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

Imports the useTime hook from the Motion React package.

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

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

### Synchronously bundle feature packages with LazyMotion

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

Passes feature packages directly to LazyMotion to include them in the main JavaScript bundle.

```jsx
import { LazyMotion, domAnimation } from "motion/react"

function App({ children }) {
  return (
    <LazyMotion features={domAnimation}>
      {children}
    </LazyMotion>
  )
}
```

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

### Configure .npmrc for Motion+ private registry

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

Sets the private registry URL for the @motionplus scope and configures authentication using the MOTION_TOKEN environment variable. This file is safe to commit to source control.

```ini
@motionplus:registry=https://api.motion.dev/npm/
//api.motion.dev/npm/:_authToken=${MOTION_TOKEN}
```

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

### AnimateActivity with layoutMode='pop'

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

Shows how to set layoutMode to 'pop' to immediately pop the element out of its layout, allowing surrounding elements to reflow while it exits.

```jsx
<AnimateActivity
  mode={isVisible ? "visible" : "hidden"}
  layoutMode="pop"
/>
```

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

### Importing useVelocity from motion/react

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

Imports the useVelocity hook from the motion/react package.

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

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

### Use Motion in Next.js App Router with use client directive

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

Converts a Next.js App Router file to a client component using the "use client" directive before importing from motion/react.

```jsx
"use client"

import { motion } from "motion/react"

export default function MyComponent() {
  return <motion.div animate={{ scale: 1.5 }} />
}
```

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

### Import m component from motion/react-m

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

Imports the lightweight m component instead of motion. It does not come preloaded with animation features, layout animations, or drag gestures.

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

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

### Create dynamic transform string with useMotionTemplate

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

Creates a new motion value from a string template containing other motion values. Whenever a motion value within the string template updates, the returned motion value updates with the latest value.

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

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

### useAnimationFrame(callback)

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

Runs a callback function once on every animation frame. The callback receives the total elapsed time and the delta since the previous frame.

```APIDOC
## useAnimationFrame(callback)

### Description
Runs a callback once every animation frame, providing the total elapsed time and the delta duration since the previous frame.

### Parameters
- **callback** `(time: number, delta: number) => void` - Required - The function to execute on each animation frame.
  - **time** `number` - The total duration of time since the callback was first called.
  - **delta** `number` - The total duration of time since the last animation frame.

### Import
```javascript
import { useAnimationFrame } from "motion/react"
```

### Usage Example
```javascript
import { useRef } from "react"
import { useAnimationFrame } from "motion/react"

function Component() {
  const ref = useRef(null)
  
  useAnimationFrame((time, delta) => {
    ref.current.style.transform = `rotateY(${time}deg)`
  })

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

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

### Create a spring motion value with useSpring

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

Initialize a spring motion value directly with a number or unit-type string such as `px` or `vh`.

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

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

### Import Typewriter from motion-plus/react

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

Import the Typewriter component from the motion-plus/react package.

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

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

### Define gesture animation targets with whileHover and whileTap

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

Sets temporary animation target values and transition settings on a motion component while hover or tap gestures are active.

```jsx
<motion.button
  whileHover={{
    scale: 1.2,
    transition: { duration: 1 },
  }}
  whileTap={{ scale: 0.9 }}
/>
```

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

### Import useDragControls from motion/react

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

Import the useDragControls hook from the Motion package.

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

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

### AnimateActivity with Tab component

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

Shows AnimateActivity wrapping a Tab component, where the Tab component is a motion.div with initial, animate, and exit opacity animations.

```jsx
<AnimateActivity mode={isVisible ? "visible" : "hidden"}>
  <Tab />
</AnimateActivity>
```

```jsx
function Tab() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    />
  )
}
```

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

### Swap imports from framer-motion to motion/react

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

Simply swap imports from "framer-motion" to "motion/react".

```jsx
import { motion } from "motion/react"
```

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

### Use motion/react-client import in Next.js App Router

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

Reduces the JavaScript delivered to the client by importing components directly from motion/react-client.

```jsx
import * as motion from "motion/react-client"

export default function MyComponent() {
  return <motion.div animate={{ scale: 1.5 }} />
}
```

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

### Importing useReducedMotion

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

Imports the useReducedMotion hook from the motion/react package.

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

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

### Async loading of features with LazyMotion

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

Load features asynchronously to ensure hydration before loading animation functionality. The features prop accepts a function that returns a promise resolving to the feature bundle.

```js
// features.js
import { domAnimation } from "motion/react"
export default domAnimation
```

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

function Component() {
  return (
    <LazyMotion features={loadFeatures}>
      <m.div animate={{ scale: 1.5 }} />
    </LazyMotion>
  )
}
```

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

### Interpolate spring and motion values into drop-shadow filter

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

Combines useSpring and useMotionValue into a dynamic drop-shadow filter string applied to a motion element.

```jsx
const shadowX = useSpring(0)
const shadowY = useMotionValue(0)

const filter = useMotionTemplate`drop-shadow(${shadowX}px ${shadowY}px 20px rgba(0,0,0,0.3))`

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

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

### useTime with useTransform for perpetual rotation

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

Creates a perpetual rotation animation by mapping the elapsed time from useTime to a 360-degree rotation over 4 seconds with clamping disabled.

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

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

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

### Import useMotionValueEvent from motion/react

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

Imports the useMotionValueEvent hook from the Motion React package.

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

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

### hover() gesture recognizer with useEffect

Source: https://motion.dev/docs/react-hover-animation

Use the tiny (<1kb) hover() function for lightweight hover handling. It returns a cleanup function, making it easy to integrate with useEffect.

```jsx
import { hover } from "motion"
import { useRef, useEffect } from "react"

function Component() {
  const ref = useRef(null)

  useEffect(() => {
    return hover(ref.current, () => {
      console.log("on hover start")

      return () => console.log("on hover end")
    })
  }, [])

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

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

### Load animation features with LazyMotion

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

Wraps children in LazyMotion to manually supply feature packages like domAnimation.

```jsx
import { LazyMotion, domAnimation } from "motion/react"

// Load only the domAnimation package
function App({ children }) {
  return (
    <LazyMotion features={domAnimation}>
      {children}
    </LazyMotion>
  )
}
```

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

### Lazy load feature packages with dynamic import

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

Defines an external feature export in features.js and passes a dynamic import function to LazyMotion. Features and animations load after the initial render resolves.

```javascript
// features.js
import { domMax } from "motion/react"
export default domMax
```

```jsx
import { LazyMotion } from "motion/react"
import * as m from "motion/react-m"

// Make sure to return the specific export containing the feature bundle.
const loadFeatures = () =>
  import("./features.js").then(res => res.default)

// This animation will run when loadFeatures resolves.
function App() {
  return (
    <LazyMotion features={loadFeatures}>
      <m.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
      />
    </LazyMotion>
  )
}
```

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

### AnimateNumber with spring transition

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

Customize the animation by passing a transition prop with Motion's transition options, such as type: "spring".

```jsx
<AnimateNumber transition={{ type: "spring" }}>
```

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

### Tagged template syntax for useMotionTemplate

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

Invokes the hook as a tagged template literal instead of a normal function call.

```javascript
useMotionValue``
```

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

### Snap element to cursor using snapToCursor option

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

Pass snapToCursor: true to controls.start to immediately snap the motion component to the cursor position instead of applying only relative changes.

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

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

### Configure automatic reduced motion with MotionConfig

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

Wrap your app in MotionConfig with reducedMotion set to "user" to automatically disable transform and layout animations across all motion components while preserving opacity and color transitions.

```javascript
import { MotionConfig } from "framer-motion"

export function App({ children }) {
  return (
    <MotionConfig reducedMotion="user">
      {children}
    </MotionConfig>
  )
}
```

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

### Replace transform animations with opacity transitions

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

Switch from positional transforms (such as x movement) to opacity fade transitions when useReducedMotion returns true.

```jsx
function Sidebar({ isOpen }) {
  const shouldReduceMotion = useReducedMotion()
  let animate

  if (isOpen) {
    animate = shouldReduceMotion ? { opacity: 1 } : { x: 0 }
  } else {
    animate = shouldReduceMotion
      ? { opacity: 0 }
      : { x: "-100%" }
  }

  return <motion.div animate={animate} />
}
```

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

### Compose useTime with useTransform for continuous rotation

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

Composes useTime with useTransform to create a continuous rotation animation, updating every frame with the time since creation.

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

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

### useTime

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

Creates a motion value that updates every frame with the elapsed time in milliseconds since the hook was first called.

```APIDOC
## useTime

### Description
Returns a motion value that updates once per frame with the duration, in milliseconds, since it was first created. This is especially useful in generating perpetual animations.

### Usage
Import from Motion:
```
import { useTime } from "motion/react"
```

When called, `useTime` will create a new motion value. This value will update every frame with the time since its creation. You can use this either directly or by composing with other motion value hooks.

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

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

### Parameters
None.

### Returns
- **motion value** (MotionValue<number>) - A motion value that updates every frame with the elapsed time in milliseconds since the hook was first called.
```

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

### Typewriter with all backspace

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

Use the backspace prop with value "all" to remove all mismatching content immediately.

```jsx
<Typewriter backspace="all">{text}</Typewriter>
```

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

### AnimateNumber with value-specific transitions

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

Value-specific transition settings for layout, opacity, and y. Allows setting specific transitions for each property.

```jsx
<AnimateNumber transition={{
  layout: { duration: 0.3 },
  opacity: { ease: "linear" },
  y: { type: "spring", visualDuration: 0.4, bounce: 0.2 }
}}>
```

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

### Basic Typewriter usage

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

Basic usage of the Typewriter component. Pass a string as the child to animate it character by character.

```jsx
<Typewriter>Hello world!</Typewriter>
```

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

### Customize hover transition with whileHover

Source: https://motion.dev/docs/react-hover-animation

Define a transition for entering the hover state by setting transition inside whileHover, and a separate transition for when the gesture ends by setting the component's transition prop.

```jsx
<motion.button
  whileHover={{
    scale: 1.1,
    // Will be used when gesture starts
    transition: { duration: 0.1 }
  }}
  // Will be used when gesture ends
  transition={{ duration: 0.5 }}
/>
```

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

### Run callback on each animation frame

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

Runs a callback function once every animation frame with the total elapsed time.

```javascript
useAnimationFrame((time) => {
  ref.current.style.transform = `rotateY(${time}deg)`
})
```

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

### Import Carousel from motion-plus/react

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

Import the Carousel component from the motion-plus/react package. This is required before using the component.

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

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

### Deriving acceleration from a velocity motion value

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

Passes a velocity motion value into useVelocity to calculate acceleration. Any numerical motion value, including another velocity motion value, can be passed.

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

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

### Animate to a new target with set

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

Call `set()` to update the motion value and animate towards the new target value with the defined spring physics.

```javascript
x.set(100)
y.set("50vh")
```

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

### Manually subscribe and unsubscribe with motion value on method

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

Demonstrates listening to motion value events using the lower-level on method inside useEffect. Unsubscribe functions must be called during cleanup to prevent memory leaks.

```javascript
useEffect(() => {
  const doSomething = () => {}
  
  const unsubX = x.on("change", doSomething)
  const unsubY = y.on("change", doSomething)
  
  return () => {
    unsubX()
    unsubY()
  }
}, [x, y])
```

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

### Pass drag controls to a draggable motion component

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

Initialize controls with useDragControls and attach them to a draggable motion element using the dragControls prop.

```javascript
const controls = useDragControls()

return <motion.div drag dragControls={controls} />
```

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

### Animate and handle hover gestures with whileHover

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

Detects when a pointer hovers over or leaves a component. Use whileHover for animations along with onHoverStart and onHoverEnd callbacks.

```jsx
<motion.a
  whileHover={{ scale: 1.2 }}
  onHoverStart={event => {}}
  onHoverEnd={event => {}}
/>
```
Tokens:
Raw