How do I use Framer Motion in my React project?

How do I use Framer Motion in my React project?

To use Framer Motion in your React project, first install it using npm or yarn. Then, import the motion components.

Can you show me a simple example of a motion component?

Sure! Here's a basic example:

import { motion } from 'framer-motion';

const Box = () => {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 1 }}
    >
      Hello, Framer Motion!
    </motion.div>
  );
};

This will fade in the box when rendered.

What other animations can I create with Framer Motion?

Framer Motion allows for various animations like scaling, rotating, dragging, and even complex gestures. You can combine these effects for more dynamic interactions!

Is it compatible with React Router?

Yes, Framer Motion works well with React Router! You can animate route transitions by wrapping your routes in motion components.