Animation

The thing CSS cannot do alone is animate an element React 7,897 is about to unmount: by the time the transition would run, the node is gone. Motion 153,286 — formerly published as Framer Motion — keeps removed children in the tree until their exit animation finishes.

import { motion, AnimatePresence } from 'motion/react';
// the body of a CartLines({ lines, onRemove }) component:
<ul>
  <AnimatePresence initial={false}>
    {lines.map((line) => (
      <motion.li key={line.id} layout
        initial={{ opacity: 0, x: -24 }} animate={{ opacity: 1, x: 0 }}
        exit={{ opacity: 0, height: 0 }} transition={{ duration: 0.18 }}>
        {line.name} <button onClick={() => onRemove(line.id)}>Remove</button>
      </motion.li>
    ))}
  </AnimatePresence>
</ul>

Any tag can be prefixed: motion.div, motion.li, motion.path. initial, animate and exit are style snapshots that Motion interpolates between; whileHover and whileTap add gesture states; layout animates a component's own position and size when siblings change, measured with getBoundingClientRect before and after the commit. Version 13.4.0 ships a motion/react-client entry for Server Components (Next.js).

Two alternatives matter. @react-spring/web 10.1.2 animates with spring physics instead of durations, which feels better for drag work. react-transition-group 4.4.5 animates nothing itself — it adds and removes class names at the right moments and leaves the rest to CSS — which is why it shows 37 M weekly downloads: React Bootstrap 126 and many other kits depend on it. Check first whether a CSS transition or View Transitions (View Transitions) already covers the effect.