Variants

Named animation states that propagate through component trees:

const container = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.08 },
  },
};

const item = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 },
};

<motion.ul variants={container} initial="hidden" animate="visible">
  {items.map((i) => (
    <motion.li key={i.id} variants={item} />
  ))}
</motion.ul>

AnimatePresence

Animate components as they unmount:

<AnimatePresence mode="wait">
  {isOpen && (
    <motion.div
      key="modal"
      initial={{ opacity: 0, scale: 0.95 }}
      animate={{ opacity: 1, scale: 1 }}
      exit={{ opacity: 0, scale: 0.95 }}
      transition={{ duration: 0.2 }}
    />
  )}
</AnimatePresence>

Layout animations

Automatic interpolation when elements change position or size:

<motion.div layout className={isExpanded ? "w-full" : "w-48"}>
  <motion.p layout="position">Content stays in place</motion.p>
</motion.div>

Shared layout with layoutId

Seamless element transitions across different components:

{items.map((item) => (
  <motion.div key={item.id} layoutId={item.id} onClick={() => setSelected(item)}>
    {item.title}
  </motion.div>
))}

{selected && (
  <motion.div layoutId={selected.id} className="expanded-card">
    {selected.details}
  </motion.div>
)}

Spring configuration

<motion.div
  animate={{ x: 100 }}
  transition={{ type: "spring", stiffness: 300, damping: 25, mass: 0.5 }}
/>

Workflow

1. Identify the animation type

Classify what you are animating: enter/exit, layout shift, gesture response, or scroll-linked. This determines which Motion API to use.

2. Define variants for reusable states

Extract animation states into variant objects. Keep them in a shared file if multiple components use the same entrance pattern.

3. Wire up AnimatePresence for exits

Wrap conditionally rendered elements in <AnimatePresence>. Use mode="wait" when the next element should wait for the previous one to finish exiting.

4. Tune spring physics

Start with a preset from the table above. Adjust stiffness for speed, damping for overshoot, and mass for weight. Test on a real device.

5. Add reduced-motion fallbacks

import { useReducedMotion } from "motion/react";

function AnimatedCard() {
  const shouldReduce = useReducedMotion();
  return (
    <motion.div
      initial={shouldReduce ? false : { opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
    />
  );
}

Examples

Example 1 — Staggered list entrance

const listVariants = {
  hidden: {},
  visible: { transition: { staggerChildren: 0.06 } },
};

const itemVariants = {
  hidden: { opacity: 0, x: -12 },
  visible: { opacity: 1, x: 0, transition: { type: "spring", stiffness: 200, damping: 20 } },
};

function FeatureList({ features }: { features: string[] }) {
  return (
    <motion.ul variants={listVariants} initial="hidden" animate="visible">
      {features.map((f) => (
        <motion.li key={f} variants={itemVariants}>{f}</motion.li>
      ))}
    </motion.ul>
  );
}

Example 2 — Gesture-driven card

<motion.div
  whileHover={{ scale: 1.02, boxShadow: "0 8px 24px rgba(0,0,0,0.12)" }}
  whileTap={{ scale: 0.98 }}
  transition={{ type: "spring", stiffness: 300, damping: 25 }}
  className="cursor-pointer rounded-card bg-surface-elevated p-space-lg"
>
  <h3>Interactive card</h3>
</motion.div>

Example 3 — Page route transition

<AnimatePresence mode="wait">
  <motion.main
    key={pathname}
    initial={{ opacity: 0, y: 8 }}
    animate={{ opacity: 1, y: 0 }}
    exit={{ opacity: 0, y: -8 }}
    transition={{ duration: 0.25 }}
  >
    {children}
  </motion.main>
</AnimatePresence>

Decision tree

• Component enter/exit? → AnimatePresence + initial/animate/exit
• List with staggered items? → Variants with staggerChildren
• Element changes position/size? → layout prop
• Shared element across views? → layoutId
• Hover/tap/drag interaction? → Gesture props (whileHover, whileTap, whileDrag)
• Scroll-driven pinning or scrubbing? → NOT Motion — use GSAP ScrollTrigger
• Multi-surface orchestration? → NOT Motion — use GSAP timelines
• Simple 2-property hover? → Consider CSS transition first

Edge cases and gotchas

1. Import path changed in v11+ — Use "motion/react", not "framer-motion". The old import still works but is deprecated.
2. AnimatePresence requires keys — Every direct child of AnimatePresence must have a unique key prop, or exit animations will not trigger.
3. layout + border-radius — The layout animation can distort border-radius during interpolation. Use layout="position" if only position should animate.
4. Exit animations and React strict mode — In development strict mode, components mount twice which can cause double-animation. Test exit behavior in production builds.
5. Spring oscillation — Low damping values cause visible oscillation. For UI elements that should land cleanly, keep damping above 15.
6. Server-side rendering — Motion components render their initial state on the server. Ensure initial values produce a usable static layout.

Evaluation criteria

• Import from "motion/react" (v11+), not "framer-motion"
• useReducedMotion() checked and fallbacks provided
• Exit animations wrapped in <AnimatePresence> with keys
• Spring configs are tuned to match the interaction feel (not default values)
• Enter animations are split into semantic chunks with stagger
• Exit animations are subtler than enter animations
• No competing animations on the same element
• Layout animations use layout="position" when only position should change
• Gesture interactions have visible hover/press feedback

Research-backed changes

The biggest delta is Chrome 147 enables concurrent and nested view transitions with element-scoped view transitions. Fold the concrete changes into the operating notes, then discard the fluff.

Fresh signals

• Chrome 147 enables concurrent and nested view transitions with element-scoped view transitions · Chrome Developer Blog
• Enter video Picture-in-Picture automatically on more sites · Chrome Developer Blog
• When to use WebMCP and MCP · Chrome Developer Blog
• Chrome 147 beta · Chrome Developer Blog

Next edits

• Add one new tactic based on Chrome 147 enables concurrent and nested view transitions with element-scoped view transitions.
• Rewrite one stale section with today's source language.
• Turn the top signal into a reusable agent prompt.

Fresh signals

• Chrome 147 enables concurrent and nested view transitions with element-scoped view transitions · Chrome Developer Blog
• Enter video Picture-in-Picture automatically on more sites · Chrome Developer Blog
• When to use WebMCP and MCP · Chrome Developer Blog
• Chrome 147 beta · Chrome Developer Blog

Next edits

• Add one new tactic based on Chrome 147 enables concurrent and nested view transitions with element-scoped view transitions.
• Rewrite one stale section with today's source language.
• Turn the top signal into a reusable agent prompt.