Banner and header animation

Author: realstoman

src/App.js

@@ -12,9 +12,9 @@ import { AnimatePresence } from 'framer-motion';
 
 function App() {
 	return (
-		<div className=" bg-secondary-light dark:bg-primary-dark transition duration-300">
-			<Router>
-				<AnimatePresence>
+		<AnimatePresence>
+			<div className=" bg-secondary-light dark:bg-primary-dark transition duration-300">
+				<Router>
 					<ScrollToTop />
 					<AppHeader />
 					<Routes>
@@ -29,9 +29,9 @@ function App() {
 						<Route path="contact" element={<Contact />} />
 					</Routes>
 					<AppFooter />
-				</AnimatePresence>
-			</Router>
-		</div>
+				</Router>
+			</div>
+		</AnimatePresence>
 	);
 }
 

src/components/shared/AppBanner.js

@@ -11,17 +11,44 @@ const AppBanner = () => {
 		<motion.section
 			initial={{ opacity: 0 }}
 			animate={{ opacity: 1 }}
-			exit={{ opacity: 0 }}
+			transition={{ ease: 'easeInOut', duration: 0.9, delay: 0.2 }}
 			className="flex flex-col sm:justify-between items-center sm:flex-row mt-12 md:mt-2"
 		>
 			<div className="w-full md:w-1/3 text-left">
-				<h1 className="text-2xl lg:text-4xl xl:text-5xl text-center sm:text-left font-semibold text-ternary-dark dark:text-primary-light uppercase">
+				<motion.h1
+					initial={{ opacity: 0 }}
+					animate={{ opacity: 1 }}
+					transition={{
+						ease: 'easeInOut',
+						duration: 0.9,
+						delay: 0.1,
+					}}
+					className="text-2xl lg:text-4xl xl:text-5xl text-center sm:text-left font-semibold text-ternary-dark dark:text-primary-light uppercase"
+				>
 					Hi, Iam Stoman
-				</h1>
-				<p className="mt-4 text-lg sm:text-xl lg:text-3xl xl:text-4xl text-center sm:text-left font-semibold leading-none text-gray-400">
+				</motion.h1>
+				<motion.p
+					initial={{ opacity: 0 }}
+					animate={{ opacity: 1 }}
+					transition={{
+						ease: 'easeInOut',
+						duration: 0.9,
+						delay: 0.2,
+					}}
+					className="mt-4 text-lg sm:text-xl lg:text-3xl xl:text-4xl text-center sm:text-left font-semibold leading-none text-gray-400"
+				>
 					A Full-Stack Developer & Design Enthusiast
-				</p>
-				<div className="flex justify-center sm:block">
+				</motion.p>
+				<motion.div
+					initial={{ opacity: 0 }}
+					animate={{ opacity: 1 }}
+					transition={{
+						ease: 'easeInOut',
+						duration: 0.9,
+						delay: 0.3,
+					}}
+					className="flex justify-center sm:block"
+				>
 					<a
 						download="Stoman-Resume.pdf"
 						href="/files/Stoman-Resume.pdf"
@@ -31,16 +58,21 @@ const AppBanner = () => {
 						<FiArrowDownCircle className="ml-0 sm:ml-1 mr-2 sm:mr-3 h-5 w-5 sn:w-6 sm:h-6"></FiArrowDownCircle>
 						<span className="text-sm sm:text-lg">Download CV</span>
 					</a>
-				</div>
+				</motion.div>
 			</div>
-			<div className="w-full sm:w-2/3 text-right float-right mt-8 sm:mt-0">
+			<motion.div
+				initial={{ opacity: 0, y: -180 }}
+				animate={{ opacity: 1, y: 0 }}
+				transition={{ ease: 'easeInOut', duration: 0.9, delay: 0.4 }}
+				className="w-full sm:w-2/3 text-right float-right mt-8 sm:mt-0"
+			>
 				<img
 					src={
 						activeTheme === 'dark' ? developerLight : developerDark
 					}
 					alt="Developer"
 				/>
-			</div>
+			</motion.div>
 		</motion.section>
 	);
 };