Estoy tratando de usar framer-motion para agregar animaciones a mi aplicación de reacción al cargar la página de inicio. La página de inicio se puede ver en el código:

 import Veggie from "../components/Veggie"; import Popular from "../components/Popular"; import { motion } from "framer-motion"; import React from 'react' function Home() { return ( <motion.div intial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 2 }} > <Veggie/> <Popular/> </motion.div> ) }

Por alguna razón, esta animación nunca se implementa en el navegador al recargar e incluso al reiniciar toda la aplicación de reacción. El código completo y todos los componentes se pueden ver en el repositorio de GitHub: Repo