React: How to implement animation with Framer Motion?

1import { motion } from "framer-motion";
2
3function AnimatedBox() {
4  return (
5    <motion.div
6      animate={{ scale: 1, opacity: 1 }}
7      initial={{ scale: 0.5, opacity: 0 }}
8      transition={{ duration: 0.5 }}
9    >
10      Animated content
11    </motion.div>
12  );
13}

1<motion.button
2  whileHover={{ scale: 1.05 }}
3  whileTap={{ scale: 0.95 }}
4  animate={{ backgroundColor: "#fff" }}
5>
6  Click me
7</motion.button>

1import { AnimatePresence, motion } from "framer-motion";
2
3function AnimatedList({ items }) {
4  return (
5    <AnimatePresence>
6      {items.map(item => (
7        <motion.div
8          key={item.id}
9          initial={{ opacity: 0, x: -50 }}
10          animate={{ opacity: 1, x: 0 }}
11          exit={{ opacity: 0, x: 50 }}
12          transition={{ duration: 0.3 }}
13        >
14          {item.text}
15        </motion.div>
16      ))}
17    </AnimatePresence>
18  );
19}

1import { motion, AnimatePresence } from "framer-motion";
2import { useLocation } from "react-router-dom";
3
4function AnimatedRoutes() {
5  const location = useLocation();
6
7  return (
8    <AnimatePresence mode="wait">
9      <motion.div
10        key={location.pathname}
11        initial={{ opacity: 0 }}
12        animate={{ opacity: 1 }}
13        exit={{ opacity: 0 }}
14      >
15        <Routes location={location}>
16          <Route path="/" element={<Home />} />
17          <Route path="/about" element={<About />} />
18        </Routes>
19      </motion.div>
20    </AnimatePresence>
21  );
22}