How can I use gestures in Framer Motion?

How can I use gestures in Framer Motion?

You can use gestures in Framer Motion by utilizing the useDrag, useHover, and useTap hooks to create interactive animations.

Can you give me an example of using the useDrag hook?

Sure! Here's a simple example:

import { motion, useDrag } from 'framer-motion';

const DraggableBox = () => {
  const { drag } = useDrag();

  return (
    <motion.div
      drag
      style={{ width: 100, height: 100, backgroundColor: 'blue' }}
      {...drag()}
    />
  );
};

This will create a draggable blue box!

What about using gestures for hover effects?

For hover effects, you can use the whileHover prop. Here's an example:

<motion.div
  whileHover={{ scale: 1.1 }}
  style={{ width: 100, height: 100, backgroundColor: 'red' }}
/>

This will scale the box up when hovered!

Are there any performance considerations I should keep in mind?

Yes, when using gestures, it's important to optimize your components to avoid unnecessary re-renders. Use React.memo and keep your animations lightweight.