undefined

**Current Version**: 12.27.5 (verified 2026-01-21)

**Note for Cloudflare Workers**:
```bash

undefined

import { AnimatePresence } from "motion/react"

<AnimatePresence>
  {isVisible && (
    <motion.div
      key="modal"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    >
      Modal content
    </motion.div>
  )}
</AnimatePresence>

// ❌ Wrong - AnimatePresence unmounts with condition
{isVisible && (
  <AnimatePresence>
    <motion.div>Content</motion.div>
  </AnimatePresence>
)}

// ✅ Correct - AnimatePresence stays mounted
<AnimatePresence>
  {isVisible && <motion.div key="unique">Content</motion.div>}
</AnimatePresence>

<motion.div layout>
  {isExpanded ? <FullContent /> : <Summary />}
</motion.div>

<motion.div
  initial={{ opacity: 0, y: 50 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, margin: "-100px" }}
>
  Fades in when 100px from entering viewport
</motion.div>

import { useScroll, useTransform } from "motion/react"

const { scrollYProgress } = useScroll()
const y = useTransform(scrollYProgress, [0, 1], [0, -300])

<motion.div style={{ y }}>
  Moves up 300px as user scrolls page
</motion.div>

pnpm add motion

"use client"

// Optimized import for Next.js (reduces client JS)
import * as motion from "motion/react-client"

export { motion }

import { motion } from "@/components/motion-client"

export default function Page() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
    >
      This works in Server Component (wrapper is client)
    </motion.div>
  )
}

"use client"

import { motion } from "motion/react"

export function AnimatedCard() {
  return <motion.div>...</motion.div>
}

import { motion } from "motion/react"

export default function Page() {
  return <motion.div>No "use client" needed</motion.div>
}

<motion.button
  className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.95 }}
>
  Tailwind styles + Motion animations
</motion.button>

// ❌ Wrong - Tailwind transition conflicts with Motion
<motion.div className="transition-all duration-300" animate={{ x: 100 }} />

// ✅ Correct - Remove Tailwind transition
<motion.div animate={{ x: 100 }} />

undefined

**Import:**
```tsx
import { motion } from "motion/react"

import { LazyMotion, domAnimation, m } from "motion/react"

function App() {
  return (
    <LazyMotion features={domAnimation}>
      {/* Use 'm' instead of 'motion' */}
      <m.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
      >
        Only 4.6 KB!
      </m.div>
    </LazyMotion>
  )
}

import { useAnimate } from "motion/react"

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

  return <div ref={scope}>Smallest possible React animation</div>
}

<motion.div
  style={{ willChange: "transform" }}
  animate={{ x: 100, rotate: 45 }}
/>

pnpm add react-window

**Pattern:**
```tsx
import { FixedSizeList } from 'react-window'
import { motion } from 'motion/react'

<FixedSizeList
  height={600}
  itemCount={1000}
  itemSize={50}
>
  {({ index, style }) => (
    <motion.div style={style} layout>
      Item {index}
    </motion.div>
  )}
</FixedSizeList>

<motion.div layout>
  {isExpanded ? <LargeContent /> : <SmallContent />}
</motion.div>

import { MotionConfig } from "motion/react"

<MotionConfig reducedMotion="user">
  <App />
</MotionConfig>

// ❌ Wrong - AnimatePresence wrapped in conditional
{isVisible && (
  <AnimatePresence>
    <motion.div>Content</motion.div>
  </AnimatePresence>
)}

// ✅ Correct - AnimatePresence stays mounted
<AnimatePresence>
  {isVisible && <motion.div key="unique">Content</motion.div>}
</AnimatePresence>

// ❌ Wrong - Staggered children with exit prevent modal removal
<AnimatePresence>
  {isOpen && (
    <Modal>
      <motion.ul>
        {items.map(item => (
          <motion.li
            key={item.id}
            exit={{ opacity: 1, scale: 1 }}  // ← Prevents modal unmount
          >
            {item.content}
          </motion.li>
        ))}
      </motion.ul>
    </Modal>
  )}
</AnimatePresence>

// ✅ Fix for modal - Remove exit from children or set duration: 0
<motion.li
  key={item.id}
  exit={{ opacity: 0, scale: 0.5, transition: { duration: 0 } }}
>
  {item.content}
</motion.li>

pnpm add react-window

// ❌ Wrong
<motion.div className="transition-all" animate={{ x: 100 }} />

// ✅ Correct
<motion.div animate={{ x: 100 }} />

"use client"

import { motion } from "motion/react"

<motion.div layoutScroll className="overflow-auto">
  {items.map(item => (
    <motion.div key={item.id} layout>
      {item.content}
    </motion.div>
  ))}
</motion.div>

<motion.div layoutRoot className="fixed top-0 left-0">
  <motion.div layout>Content</motion.div>
</motion.div>

import { LayoutGroup } from "motion/react"

<LayoutGroup>
  <AnimatePresence>
    {items.map(item => (
      <motion.div key={item.id} layoutId={item.id}>
        {item.content}
      </motion.div>
    ))}
  </AnimatePresence>
</LayoutGroup>

const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches

<motion.div
  initial={{ opacity: prefersReducedMotion ? 1 : 0 }}
  animate={{ opacity: 1 }}
  transition={{ duration: prefersReducedMotion ? 0 : 0.3 }}
/>

// ❌ Wrong - Page-level scrolling (auto-scroll fails)
<body style={{ height: "200vh" }}>
  <Reorder.Group values={items} onReorder={setItems}>
    {/* Auto-scroll doesn't trigger at viewport edges */}
  </Reorder.Group>
</body>

// ✅ Correct - Container with overflow
<div style={{ height: "300px", overflow: "auto" }}>
  <Reorder.Group values={items} onReorder={setItems}>
    {items.map(item => (
      <Reorder.Item key={item.id} value={item}>
        {item.content}
      </Reorder.Item>
    ))}
  </Reorder.Group>
</div>

// ✅ Alternative - Use DnD Kit for complex cases
// Motion docs officially recommend DnD Kit for:
// - Multi-row reordering
// - Dragging between columns
// - Page-level scrollable containers
// - Complex drag-and-drop interactions

// Install: pnpm add @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities

// Use transformTemplate to correct for parent scale
const scale = 2; // Parent's transform scale value

<div style={{ transform: `scale(${scale})` }}>
  <motion.div
    layout
    transformTemplate={(latest, generated) => {
      const match = /translate3d\((.+)px,\s?(.+)px,\s?(.+)px\)/.exec(generated);
      if (match) {
        const [, x, y, z] = match;
        return `translate3d(${Number(x) / scale}px, ${Number(y) / scale}px, ${Number(z) / scale}px)`;
      }
      return generated;
    }}
  >
    Content
  </motion.div>
</div>