How can I create gestures with Framer Motion?

How can I create gestures with Framer Motion?

You can create gestures in Framer Motion using the useDrag and useHover hooks. Would you like a code example?

Yes, please provide a code example for a drag gesture.

Here's a simple example:

import { motion } from 'framer-motion';

function DraggableBox() {
  return (
    <motion.div
      drag
      dragConstraints={{ left: 0, top: 0, right: 300, bottom: 300 }}
      style={{ width: 100, height: 100, backgroundColor: 'blue' }}
    />
  );
}

This will allow the box to be dragged within the specified constraints.

What about adding a hover effect?

You can add a hover effect by using the whileHover prop. Here's an updated example:

<motion.div
  drag
  whileHover={{ scale: 1.1 }}
  dragConstraints={{ left: 0, top: 0, right: 300, bottom: 300 }}
  style={{ width: 100, height: 100, backgroundColor: 'blue' }}
/>

This will scale the box up when hovered.