What are some examples of using Framer Motion in React?

What are some examples of using Framer Motion in React?

Framer Motion is a powerful library for animations in React. You can use it for simple transitions, complex animations, and even gestures. For example, you can animate a button on hover or create a modal that slides in from the side.

Can you show me a code snippet for a button hover effect?

Sure! Here's a simple example:

import { motion } from 'framer-motion';

const Button = () => {
  return (
    <motion.button
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.9 }}
    >
      Hover Me
    </motion.button>
  );
};

This code scales the button up when hovered and scales it down when tapped.

What about animating a modal?

To animate a modal, you can use the initial, animate, and exit props. Here's an example:

import { motion } from 'framer-motion';

const Modal = ({ isOpen, onClose }) => {
  return (
    <motion.div
      initial={{ opacity: 0, y: '-100%' }}
      animate={{ opacity: 1, y: '0%' }}
      exit={{ opacity: 0, y: '100%' }}
    >
      <h2>Modal Title</h2>
      <button onClick={onClose}>Close</button>
    </motion.div>
  );
};

This will slide the modal in from the top and out to the bottom.