Implemented Smooth Page Transitions with Framer Motion

package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "axios": "^1.6.8",
-    "framer-motion": "^11.1.7",
+    "framer-motion": "^11.18.2",
     "gsap": "^3.12.5",
     "lil-gui": "^0.19.2",
     "react": "^18.2.0",
@@ -20,6 +20,7 @@
     "react-dom": "^18.2.0",
     "react-icon-cloud": "^1.1.3",
     "react-icons": "^5.2.1",
+    "react-intersection-observer": "^9.15.1",
     "react-router-dom": "^6.23.0",
     "react-spring": "^9.7.3",
     "react-three-fiber": "^6.0.13",

src/App.css

@@ -69,6 +69,4 @@
 .title {
   color:aliceblue;
 }
-
-
 

src/App.jsx

@@ -15,10 +15,10 @@ import VerticalTimeline from './Components/Timeline';
 import Carousel from './Components/Carousel';
 import Hero from './Components/Hero';
 import Footer from "./Components/Footer"
-
-
+import SlideBottomPageWrapper from './Components/slidebottom';
 const Homepage = () => {
   return (
+    <SlideBottomPageWrapper>
     <div>
       <Hero />
        {/* Text Section between Hero and Carousel */}
@@ -33,6 +33,7 @@ const Homepage = () => {
         <Carousel />
       </div>
     </div>
+    </SlideBottomPageWrapper>
   );
 };
 

src/Components/Achievements.jsx

@@ -1,30 +1,35 @@
 import React from 'react';
 import CircularCard from './CircularCard';
-
+import SlideUpPageWrapper from './fadeSlideup';
+import SlideInFromLeft from './slideInleftfade';
+import SlideInFromRight from './slideinRightfade';
 const Achievements = () => {
   return (
+
     <div className='min-h-screen'>
-      <h1 className="text-center mx-auto text-5xl font-mono py-12 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-pink-300 to-red-300">
+      <SlideInFromLeft><h1 className="text-center mx-auto text-5xl font-mono py-12 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-pink-300 to-red-300">
         GSoC Contributors
-      </h1>
+      </h1></SlideInFromLeft>
+      <SlideUpPageWrapper>
       <div className="grid grid-cols-6 px-3 gap-12 justify-center">
         <div></div>
         <CircularCard image='https://i.ibb.co/jJyjcvZ/Kshitij-Shah-photoaidcom-cropped.png' name='Kshitij Shah' organization='Sugarlabs' link="https://github.com/kshitijdshah99/Pippy_Activity" />
         <CircularCard image='https://i.ibb.co/Z6fgX5F/IMG-20231110-003535-01-01-photoaidcom-cropped.png' name='Vedant Mehra' organization='CERN' link="https://hepsoftwarefoundation.org/gsoc/blogs/2024/blog_SOFIE_VedantMehra.html" />
         <CircularCard image='https://i.ibb.co/Sm9FtJ2/1714656497995-photoaidcom-cropped.png' name='Mayank Palan' organization='Red Hen Lab' link="https://medium.com/@mayankpalan066/gsoc24-with-red-hen-lab-modeling-wayfinding-cfb0131b71d1" />
         <CircularCard image='https://i.ibb.co/C640S72/Scanned-20240502-1627-1-page-0001-photoaidcom-cropped.png' name='Sharan Poojari' organization='NumFOCUS' link="https://github.com/aiidateam/aiida-explorer/blob/gsoc/gsoc/README.md" />
         <div></div>
-      </div>
-        <div className="grid grid-cols-7 px-6 justify-center gap-12">
+      </div></SlideUpPageWrapper>
+        <SlideInFromRight><div className="grid grid-cols-7 px-6 justify-center gap-12">
 <div></div>
 <div></div>
           <CircularCard image='https://i.ibb.co/T4D9vMh/IMG-20240502-172654-photoaidcom-cropped.png' name='Warren Jacinto' organization='Open Astronomy' link="https://deadspheroid.github.io/my-blog/" />
           <CircularCard image='https://i.ibb.co/t3vy9D9/IMG-20240502-WA0043-2-photoaidcom-cropped.png' name='Tvisha Vedant' organization='INCF' link="https://tvilight4.github.io/MyBlog/" />
           <CircularCard image='https://i.ibb.co/9WSz3ss/photo-photoaidcom-cropped.png' name='Raya Chakravarthy' organization='INCF' link="https://raya679.github.io/gsoc/" />
           <div></div>
           <div></div>
-        </div>
+        </div></SlideInFromRight>
     </div>
+
   );
 }
 

src/Components/Events.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Chrono } from "react-chrono";
 import '../App.css'
-
+import SlideUpPageWrapper from "./fadeSlideup";
 const Events = () => {
   const items = [
     {
@@ -66,9 +66,11 @@ const Events = () => {
     }
   ];
 
+
   return (
     <div className="relative h-[91.1vh] w-full ">
       <div className="absolute inset-0 bg-[radial-gradient(rgba(79,79,79,0.2)_1px,transparent_1px),radial-gradient(rgba(79,79,79,0.2)_1px,transparent_1px)] bg-[length:20px_20px]">
+        <SlideUpPageWrapper>
         <div style={{ width: "100%", height: "90vh", padding: "2rem" }}>
           <Chrono
             items={items}
@@ -96,7 +98,7 @@ const Events = () => {
             }}
             cardHeight={180}
           />
-        </div>
+        </div></SlideUpPageWrapper>
       </div>
     </div>
   )

src/Components/PageWrapper.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { motion } from "framer-motion";
+
+const pageVariants = {
+  initial: { opacity: 0, x: -100 },
+  animate: { opacity: 1, x: 0 },
+  exit: { opacity: 0, x: 100 },
+};
+
+const PageWrapper = ({ children }) => {
+  return (
+    <motion.div
+      variants={pageVariants}
+      initial="initial"
+      animate="animate"
+      exit="exit"
+      transition={{ duration: 0.5 }}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+export default PageWrapper;

src/Components/PastProjects.jsx

@@ -1,12 +1,15 @@
 import React from 'react';
 import FeatureCard from './FeatureCard'; // Assuming FeatureCard is in the same directory
-
+import SlideUpPageWrapper from './fadeSlideup';
+import SlideRotatePageWrapper from './slideinleftRotate';
 const PastProjects = () => {
   return (
+
     <div className="relative h-[175vh] pb-2 w-full bg-slate-900">
     <div className="absolute inset-0 bgC">
     <div className="text-center overflow-y-auto mt-5">
-      <h1 className="text-5xl font-bold text-transparent my-6 py-4 bg-clip-text bg-gradient-to-r from-purple-500 via-blue-500 to-purple-600 mb-10">Past Projects</h1>
+      <SlideRotatePageWrapper><h1 className="text-5xl font-bold text-transparent my-6 py-4 bg-clip-text bg-gradient-to-r from-purple-500 via-blue-500 to-purple-600 mb-10">Past Projects</h1></SlideRotatePageWrapper>
+      <SlideUpPageWrapper>
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
         <FeatureCard
           title="Transformer From Scratch"
@@ -81,6 +84,8 @@ const PastProjects = () => {
             page="https://github.com/extint/Semantic_Segmentation"
         />
         </div>
+
+
 
         {/* <FeatureCard
           title="Project Title 10"
@@ -91,10 +96,11 @@ const PastProjects = () => {
           tagStyle="gradient-text"
           page="/project-details-10"
         /> */}
-      </div>
+      </div></SlideUpPageWrapper>
     </div>
     </div>
     </div>
+
   );
 };
 

src/Components/Projects.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-
+import SlideRotatePageWrapper from './slideinleftRotate';
 const CardRow = () => {
   return (
+    <SlideRotatePageWrapper>
     <div className="relative h-[91.5vh] w-full bg-transparent">
     <div className="absolute inset-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px]">
 
@@ -16,6 +17,7 @@ const CardRow = () => {
     </div>
     </div>
     </div>
+    </SlideRotatePageWrapper>
   );
 };
 

src/Components/Timeline.jsx

@@ -22,7 +22,8 @@ const VerticalTimeline = () => {
 					item.classList.add("show");
 				}
 			});
-
+		 // Initial check on load
+    run();
 		// Events
 		window.addEventListener("load", run);
 		window.addEventListener("resize", run);
@@ -34,8 +35,7 @@ const VerticalTimeline = () => {
 			window.removeEventListener("scroll", run);
 		};
 	}, []);
-
-	return (
+    return (
 		<div>
 			<div className="relative h-[91.1vh] w-full bg-gradient-to-r from-slate-900 to-gray-800">
 				<div className="absolute inset-0 bg-[radial-gradient(rgba(79,79,79,0.2)_1px,transparent_1px),radial-gradient(rgba(79,79,79,0.2)_1px,transparent_1px)] bg-[length:20px_20px]">
@@ -47,6 +47,7 @@ const VerticalTimeline = () => {
 					<section id="timeline">
 						<ul>
 							<h3>2015</h3>
+
 							<li>
 								<div>
 									<div>
@@ -59,6 +60,7 @@ const VerticalTimeline = () => {
 								</div>
 							</li>
 							<h3>2016</h3>
+
 							<li>
 								<div>
 									<div>
@@ -71,6 +73,7 @@ const VerticalTimeline = () => {
 								</div>
 							</li>
 							<h3>2017</h3>
+
 							<li>
 								<div>
 									<div>
@@ -84,6 +87,7 @@ const VerticalTimeline = () => {
 								</div>
 							</li>
 							<h3>2018</h3>
+
 							<li>
 								<div>
 									<div>
@@ -96,6 +100,7 @@ const VerticalTimeline = () => {
 								</div>
 							</li>
 							<h3>2019</h3>
+
 							<li>
 								<div>
 									<div>
@@ -108,7 +113,8 @@ const VerticalTimeline = () => {
 								</div>
 							</li>
 							<h3>2020</h3>
-							<li>
+
+								<li>
 								<div>
 									<div>
 										<h2>Title Six</h2>

src/Components/UpcomingProjects.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PulsePageWrapper from './pulse';
 
 const UpcomingProjects = () => {
     // Custom styles for gradient text
@@ -11,12 +12,14 @@ const UpcomingProjects = () => {
     };
 
     return (
+        <PulsePageWrapper>
         <div className="h-[91.1vh] w-full font-monoS flex flex-col items-center justify-center bg-slate-900">
             <div className="text-center">
                 <h1 style={gradientTextStyle} className="text-7xl font-mono mb-6 font-bold mt-8">Upcoming Projects</h1>
                 <h2 className="text-xl text-gray-300 mt-4 font-mono animate-pulse">Coming Soon</h2>
             </div>
         </div>
+        </PulsePageWrapper>
     );
 }