How can I create animations in React?

How can I create animations in React?

You can create animations in React using libraries like Framer Motion or React Spring. Would you like a code example?

Yes, please provide a simple example using Framer Motion.

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 }}
      style={{ width: 100, height: 100, backgroundColor: 'blue' }}
    />
  );
};

This will fade in a blue box over 1 second.

That looks great! Can I add more animations to it?

Absolutely! You can chain animations or add different properties like scale or rotate. Would you like to see an example of that?