Enhance component animations with Framer Motion (#11)

src/Components/Achievements.jsx

@@ -1,31 +1,134 @@
 import React from 'react';
+import { easeInOut, easeOut, motion } from 'framer-motion';
 import CircularCard from './CircularCard';
 
 const Achievements = () => {
+  const headingVariants = {
+    hidden: { opacity: 0, y: 20},
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 1,
+        ease: "easeOut",
+        delay: 0.2,
+      },
+    },
+  };
+
+
+
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        delayChildren: 0.2,
+        staggerChildren: 0.08, 
+        ease: easeOut,
+      },
+    },
+  };
+
+  const cardVariants = {
+    hidden: { opacity: 0, scale: 0.9 },
+    visible: {
+      opacity: 1,
+      scale: 1,
+      transition: { duration: 0.6 },
+    },
+  };
+
   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">
+    <div className="min-h-screen">
+      <motion.h1
+        initial="hidden"
+        animate="visible"
+        variants={headingVariants}
+        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>
-      <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></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/" />
+      </motion.h1>
+
+      {/* Unified container for staggering animation */}
+      <motion.div
+        initial="hidden"
+        animate="visible"
+        variants={containerVariants}
+      >
+        {/* First row */}
+        <div className="grid grid-cols-6 px-3 gap-12 justify-center">
+          <div></div>
+          <motion.div variants={cardVariants}>
+            <CircularCard
+              image="https://i.ibb.co/jJyjcvZ/Kshitij-Shah-photoaidcom-cropped.png"
+              name="Kshitij Shah"
+              organization="Sugarlabs"
+              link="https://github.com/kshitijdshah99/Pippy_Activity"
+            />
+          </motion.div>
+          <motion.div variants={cardVariants}>
+            <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"
+            />
+          </motion.div>
+          <motion.div variants={cardVariants}>
+            <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"
+            />
+          </motion.div>
+          <motion.div variants={cardVariants}>
+            <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"
+            />
+          </motion.div>
+          <div></div>
+        </div>
+
+        {/* Second row */}
+        <div className="grid grid-cols-7 px-6 gap-12 justify-center">
+          <div></div>
+          <div></div>
+          <motion.div variants={cardVariants}>
+            <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/"
+            />
+          </motion.div>
+          <motion.div variants={cardVariants}>
+            <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/"
+            />
+          </motion.div>
+          <motion.div variants={cardVariants}>
+            <CircularCard
+              image="https://i.ibb.co/9WSz3ss/photo-photoaidcom-cropped.png"
+              name="Raya Chakravarty"
+              organization="INCF"
+              link="https://raya679.github.io/gsoc/"
+            />
+          </motion.div>
           <div></div>
           <div></div>
         </div>
+      </motion.div>
     </div>
   );
-}
+};
 
 export default Achievements;

src/Components/Events.jsx

@@ -1,73 +1,91 @@
 import React from "react";
 import { Chrono } from "react-chrono";
-import '../App.css'
+import { easeInOut, motion } from "framer-motion";
+import "../App.css";
 
 const Events = () => {
   const items = [
     {
       title: "March 19 2024",
       cardTitle: "Open Source Introduction",
-      // cardSubtitle: "Men of the British Expeditionary Force (BEF) wade out to...",
-      cardDetailedText: "Open source software is software with source code that anyone can inspect, modify, and enhance",
+      cardDetailedText:
+        "Open source software is software with source code that anyone can inspect, modify, and enhance",
       media: {
         type: "IMAGE",
         source: {
-          url: "src/assets/Xplore_1.jpg"
-        }
-      }
+          url: "src/assets/Xplore_1.jpg",
+        },
+      },
     },
     {
       title: "April 24 2024",
       cardTitle: "OpenCV Workshop",
-      // cardSubtitle: "OpenCV is a library of programming functions mainly for real-time computer vision..",
-      cardDetailedText: "OpenCV is a library of programming functions mainly for real-time computer vision",
+      cardDetailedText:
+        "OpenCV is a library of programming functions mainly for real-time computer vision",
       media: {
         type: "IMAGE",
         source: {
-          url: "src/assets/OpenCV.jpg"
-        }
-      }
+          url: "src/assets/OpenCV.jpg",
+        },
+      },
     },
     {
       title: "June - July 2024",
       cardTitle: "Selection Phase for batch of 2027",
-      // cardSubtitle: "A surprise military strike by the Imperial Japanese Navy Air Service...",
-      cardDetailedText: "An exhuastive process involving tasks, proposal preparations and interviews was carried out to shortlists sys for the mentorship program.",
+      cardDetailedText:
+        "An exhaustive process involving tasks, proposal preparations and interviews was carried out to shortlists sys for the mentorship program.",
       media: {
         type: "IMAGE",
         source: {
-          url: "src/assets/selection_phase.png"
-        }
-      }
+          url: "src/assets/selection_phase.png",
+        },
+      },
     },
     {
       title: "July - October",
-      cardTitle: "Weekly Meets and project development phase",
-      // cardSubtitle: "Men of the British Expeditionary Force (BEF) wade out to...",
-      cardDetailedText: "Sys developed their respective projects under the mentorship of Tys which was continuosly monitored by Lys via weekly presentations.",
+      cardTitle: "Weekly Meets and Project Development Phase",
+      cardDetailedText:
+        "Sys developed their respective projects under the mentorship of Tys which was continuously monitored by Lys via weekly presentations.",
       media: {
         type: "IMAGE",
         source: {
-          url: "src/assets/Weekly_meet.JPG"
-        }
-      }
+          url: "src/assets/Weekly_meet.JPG",
+        },
+      },
     },
     {
       title: "October 19 2024",
       cardTitle: "Final Presentation",
-      // cardSubtitle: "Men of the British Expeditionary Force (BEF) wade out to...",
-      cardDetailedText: "The project development phase was wrapped up , here the Sys presented their work and answered the questions posed to them.",
+      cardDetailedText:
+        "The project development phase was wrapped up, here the Sys presented their work and answered the questions posed to them.",
       media: {
         type: "IMAGE",
         source: {
-          url: "src/assets/final_presentation.jpeg"
-        }
-      }
-    }
+          url: "src/assets/final_presentation.jpeg",
+        },
+      },
+    },
   ];
 
+  const containerVariants = {
+    hidden: { opacity: 0, y: 40 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 2,
+        ease: easeInOut,
+      },
+    },
+  };
+
   return (
-    <div className="relative h-[91.1vh] w-full ">
+    <motion.div
+      initial="hidden"
+      animate="visible"
+      variants={containerVariants}
+      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]">
         <div style={{ width: "100%", height: "90vh", padding: "2rem" }}>
           <Chrono
@@ -84,22 +102,22 @@ const Events = () => {
               titleColor: "#fff",
               lineColor: "#4a5568",
               cardText: "#e2e8f0",
-              dotColor: "#0b228c"
+              dotColor: "#0b228c",
             }}
             className={{
-              card: "rounded-lg shadow-lg",
+              card: "rounded-lg shadow-lg chrono-card",
               cardMedia: "rounded-t-lg",
               cardSubTitle: "text-sm font-medium",
               cardTitle: "text-lg font-bold",
               controls: "my-controls",
               title: "text-2xl font-bold mb-4",
             }}
             cardHeight={180}
-          />
+            />
         </div>
       </div>
-    </div>
-  )
-}
+    </motion.div>
+  );
+};
 
-export default Events;
+export default Events;