I am trying to use framer-motion to add animations to my react app when loading the Home Page. The home page can be seen in the code:
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>
)
}For some reason, this animation is never implemented in the browser upon reload and even upon restarting the whole react app. The whole code and all components can be seen on the GitHub repo: Repo
The initial prop is misspelled. Everything else looks correct!