When you want your React components to react to user gestures, Framer Motion provides two powerful props: whileHover and whileTap. These props let you define how a component should animate in response to user interactions. The whileHover prop triggers an animation when the user hovers over the component with their mouse, while the whileTap prop animates the component when it is pressed or tapped. This allows you to create interactive feedback that feels smooth and intuitive for users. Both props accept an object that describes the animation you want to apply during the interaction. When the gesture ends—such as when the mouse leaves or the tap is released—the component smoothly returns to its original state or to the next defined animation.

Suppose you want to animate a button so that it slightly enlarges when hovered and shrinks a bit when tapped. You can use Framer Motion's motion.button and pass in the whileHover and whileTap props to achieve this effect. Here is how you could do it:

import { motion } from "framer-motion";

function AnimatedButton() {
  return (
    <motion.button
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.95 }}
      style={{
        padding: "12px 32px",
        background: "#007bff",
        color: "white",
        border: "none",
        borderRadius: "6px",
        cursor: "pointer",
        fontSize: "18px"
      }}
    >
      Click Me
    </motion.button>
  );
}

When you hover over the button, it grows to 110% of its original size. When you tap or press down on it, it shrinks to 95%. This immediate feedback helps users understand that their actions are being recognized by the interface.