Animate home projects and about

Author: realstoman

src/App.js

@@ -8,25 +8,28 @@ import Contact from './pages/Contact';
 import Home from './pages/Home';
 import Projects from './pages/Projects';
 import ProjectSingle from './pages/ProjectSingle';
+import { AnimatePresence } from 'framer-motion';
 
 function App() {
 	return (
 		<div className=" bg-secondary-light dark:bg-primary-dark transition duration-300">
 			<Router>
-				<ScrollToTop />
-				<AppHeader />
-				<Routes>
-					<Route path="/" element={<Home />} />
-					<Route path="projects" element={<Projects />} />
-					<Route
-						path="projects/single-project"
-						element={<ProjectSingle />}
-					/>
+				<AnimatePresence>
+					<ScrollToTop />
+					<AppHeader />
+					<Routes>
+						<Route path="/" element={<Home />} />
+						<Route path="projects" element={<Projects />} />
+						<Route
+							path="projects/single-project"
+							element={<ProjectSingle />}
+						/>
 
-					<Route path="about" element={<About />} />
-					<Route path="contact" element={<Contact />} />
-				</Routes>
-				<AppFooter />
+						<Route path="about" element={<About />} />
+						<Route path="contact" element={<Contact />} />
+					</Routes>
+					<AppFooter />
+				</AnimatePresence>
 			</Router>
 		</div>
 	);

src/components/projects/ProjectSingle.js

@@ -1,28 +1,35 @@
+import { motion } from 'framer-motion';
 import { Link } from 'react-router-dom';
 
 const ProjectSingle = ({ title, category, image }) => {
 	return (
-		<Link
-			to="/projects/single-project"
-			className="rounded-xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0 bg-secondary-light dark:bg-ternary-dark"
-			aria-label="Single Project"
+		<motion.div
+			initial={{ opacity: 0 }}
+			animate={{ opacity: 1, delay: 1 }}
+			exit={{ opacity: 0 }}
 		>
-			<div>
-				<img
-					src={image}
-					className="rounded-t-xl border-none"
-					alt="Single Project"
-				/>
-			</div>
-			<div className="text-center px-4 py-6">
-				<p className="text-2xl text-ternary-dark dark:text-ternary-light font-semibold mb-2">
-					{title}
-				</p>
-				<span className="text-lg text-ternary-dark dark:text-ternary-light">
-					{category}
-				</span>
-			</div>
-		</Link>
+			<Link
+				to="/projects/single-project"
+				className="rounded-xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0 bg-secondary-light dark:bg-ternary-dark"
+				aria-label="Single Project"
+			>
+				<div>
+					<img
+						src={image}
+						className="rounded-t-xl border-none"
+						alt="Single Project"
+					/>
+				</div>
+				<div className="text-center px-4 py-6">
+					<p className="text-2xl text-ternary-dark dark:text-ternary-light font-semibold mb-2">
+						{title}
+					</p>
+					<span className="text-lg text-ternary-dark dark:text-ternary-light">
+						{category}
+					</span>
+				</div>
+			</Link>
+		</motion.div>
 	);
 };
 

src/components/projects/ProjectsGrid.js

@@ -3,6 +3,7 @@ import { FiSearch } from 'react-icons/fi';
 import ProjectSingle from './ProjectSingle';
 import { ProjectsContext } from '../../context/ProjectsContext';
 import ProjectsFilter from './ProjectsFilter';
+import { motion } from 'framer-motion';
 
 const ProjectsGrid = () => {
 	const {

src/components/shared/AppBanner.js

@@ -2,12 +2,18 @@ import useThemeSwitcher from '../../hooks/useThemeSwitcher';
 import { FiArrowDownCircle } from 'react-icons/fi';
 import developerLight from '../../images/developer.svg';
 import developerDark from '../../images/developer-dark.svg';
+import { motion } from 'framer-motion';
 
 const AppBanner = () => {
 	const [activeTheme] = useThemeSwitcher();
 
 	return (
-		<section className="flex flex-col sm:justify-between items-center sm:flex-row mt-12 md:mt-2">
+		<motion.section
+			initial={{ opacity: 0 }}
+			animate={{ opacity: 1 }}
+			exit={{ opacity: 0 }}
+			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">
 					Hi, Iam Stoman
@@ -35,7 +41,7 @@ const AppBanner = () => {
 					alt="Developer"
 				/>
 			</div>
-		</section>
+		</motion.section>
 	);
 };
 

src/pages/AboutMe.js

@@ -2,20 +2,37 @@ import AboutMeBio from '../components/about/AboutMeBio';
 import AboutCounter from '../components/about/AboutCounter';
 import AboutClients from '../components/about/AboutClients.js';
 import { AboutMeProvider } from '../context/AboutMeContext';
+import { motion } from 'framer-motion';
 
 const About = () => {
 	return (
 		<AboutMeProvider>
-			<div className="container mx-auto">
+			<motion.div
+				initial={{ opacity: 0 }}
+				animate={{ opacity: 1, delay: 1 }}
+				exit={{ opacity: 0 }}
+				className="container mx-auto"
+			>
 				<AboutMeBio />
-			</div>
+			</motion.div>
 
 			{/** Counter without paddings */}
-			<AboutCounter />
+			<motion.div
+				initial={{ opacity: 0 }}
+				animate={{ opacity: 1, delay: 1 }}
+				exit={{ opacity: 0 }}
+			>
+				<AboutCounter />
+			</motion.div>
 
-			<div className="container mx-auto">
+			<motion.div
+				initial={{ opacity: 0 }}
+				animate={{ opacity: 1, delay: 1 }}
+				exit={{ opacity: 0 }}
+				className="container mx-auto"
+			>
 				<AboutClients />
-			</div>
+			</motion.div>
 		</AboutMeProvider>
 	);
 };

src/pages/ProjectSingle.js

@@ -3,17 +3,23 @@ import ProjectHeader from '../components/projects//ProjectHeader';
 import ProjectInfo from '../components/projects/ProjectInfo';
 import ProjectRelatedProjects from '../components/projects/ProjectRelatedProjects';
 import { SingleProjectProvider } from '../context/SingleProjectContext';
+import { motion } from 'framer-motion';
 
 const ProjectSingle = () => {
 	return (
-		<div className="container mx-auto mt-5 sm:mt-10">
+		<motion.div
+			initial={{ opacity: 0 }}
+			animate={{ opacity: 1, delay: 1 }}
+			exit={{ opacity: 0 }}
+			className="container mx-auto mt-5 sm:mt-10"
+		>
 			<SingleProjectProvider>
 				<ProjectHeader />
 				<ProjectGallery />
 				<ProjectInfo />
 				<ProjectRelatedProjects />
 			</SingleProjectProvider>
-		</div>
+		</motion.div>
 	);
 };