What are some examples of using Framer Motion in React?

What are some examples of using Framer Motion in React?

Framer Motion is a popular library for animations in React. Here are a few examples:

1. Page Transitions: Smoothly animate between different pages in your app.
2. Hover Effects: Create engaging hover animations for buttons and links.
3. Modals: Animate the entrance and exit of modal dialogs.
4. List Animations: Animate items in a list as they enter or leave the DOM.

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

Sure! Here's a simple example of a hover effect using Framer Motion:

import { motion } from 'framer-motion';

const Button = () => {
  return (
    <motion.button
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.9 }}
      style={{ padding: '10px 20px', fontSize: '16px' }}
    >
      Hover Me
    </motion.button>
  );
};

This button will scale up when hovered and scale down when clicked.

What about animating a modal?

Here's how you can animate a modal using Framer Motion:

import { motion } from 'framer-motion';

const Modal = ({ isOpen, onClose }) => {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.8 }}
      animate={{ opacity: 1, scale: 1 }}
      exit={{ opacity: 0, scale: 0.8 }}
      transition={{ duration: 0.3 }}
      style={{ background: 'white', padding: '20px', borderRadius: '8px' }}
    >
      <h2>Modal Title</h2>
      <button onClick={onClose}>Close</button>
    </motion.div>
  );
};

This modal will fade in and scale up when opened, and fade out and scale down when closed.

Can I use Framer Motion with other animation libraries?

Yes, you can use Framer Motion alongside other animation libraries. Just ensure that they don't conflict with each other. You can combine them for more complex animations or effects.