When you need to manage complex animation states in your React app, Framer Motion's variants provide a powerful and reusable solution. Variants let you define sets of animation states as objects and assign them to your motion components. Instead of writing separate animation props for every component and state, you create a single source of truth for your animation logic. This makes your code easier to maintain, especially when multiple elements need to animate in coordination or respond to the same state change. Variants also make it simple to trigger different animations by changing a single prop, such as animate, across a group of components.

Suppose you want to animate a parent card and its child items when the card is hovered. You can define a variants object for the parent and another for the children. The parent variant controls the overall scaling and background color, while the child variant controls the staggered appearance of the items. By passing the same variant names to both the parent and its children, all animations can be orchestrated together:

const cardVariants = {
  initial: { scale: 1, backgroundColor: "#fff" },
  hovered: { scale: 1.05, backgroundColor: "#f0f0f0", transition: { when: "beforeChildren", staggerChildren: 0.1 } }
};

const itemVariants = {
  initial: { opacity: 0, y: 20 },
  hovered: { opacity: 1, y: 0 }
};

<motion.div
  variants={cardVariants}
  initial="initial"
  whileHover="hovered"
>
  <motion.div variants={itemVariants} />
  <motion.div variants={itemVariants} />
  <motion.div variants={itemVariants} />
</motion.div>

With this setup, hovering over the card triggers both the parent and child animations, with the children animating in a staggered sequence. This approach keeps your animation logic organized and makes it easy to update or reuse animation states across different components.