Framer Motion Gesture Animations with whileHover and whileTap

Adding hover and active states with CSS or manual JS event listeners for complex animations is verbose and hard to compose.

Use whileHover and whileTap shorthand props. Framer Motion automatically handles the gesture lifecycle including reverting to animate when the gesture ends.

<motion.button
  whileHover={{ scale: 1.05, backgroundColor: '#6366f1' }}
  whileTap={{ scale: 0.95 }}
  transition={{ type: 'spring', stiffness: 400, damping: 25 }}
>
  Click me
</motion.button>

// With variants
const buttonVariants = {
  rest: { scale: 1 },
  hover: { scale: 1.05 },
  tap: { scale: 0.95 },
};

<motion.button
  variants={buttonVariants}
  initial="rest"
  whileHover="hover"
  whileTap="tap"
/>

Gesture props integrate with Framer Motion's animation state machine. The current gesture automatically takes priority over animate, and the system gracefully handles interrupted gestures (e.g., dragging away during a tap).