From 1fc158cb9649d9385b98b62dc06555d24496a0b5 Mon Sep 17 00:00:00 2001
From: Ayushmaanagarwal1121 <agarwalayushmaan88@gmail.com>
Date: Fri, 9 Aug 2024 19:29:16 +0530
Subject: [PATCH] Added animation

---
 package-lock.json              | 25 +++++++++++++++++++++++++
 package.json                   |  1 +
 src/Components/Contributors.js | 15 ++++++++++++---
 3 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2b85db4..fab9406 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
         "@testing-library/user-event": "^14.5.2",
         "axios": "^1.7.3",
         "firebase": "^10.12.4",
+        "framer-motion": "^11.3.24",
         "lottie-react": "^2.4.0",
         "mdn-data": "^2.9.0",
         "react": "^18.0.0",
@@ -9703,6 +9704,30 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.3.24",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.3.24.tgz",
+      "integrity": "sha512-kl0YI7HwAtyV0VOAWuU/rXoOS8+z5qSkMN6rZS+a9oe6fIha6SC3vjJN6u/hBpvjrg5MQNdSnqnjYxm0WYTX9g==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
diff --git a/package.json b/package.json
index 3cfe179..77a9dcd 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@testing-library/user-event": "^14.5.2",
     "axios": "^1.7.3",
     "firebase": "^10.12.4",
+    "framer-motion": "^11.3.24",
     "lottie-react": "^2.4.0",
     "mdn-data": "^2.9.0",
     "react": "^18.0.0",
diff --git a/src/Components/Contributors.js b/src/Components/Contributors.js
index f095404..571c362 100644
--- a/src/Components/Contributors.js
+++ b/src/Components/Contributors.js
@@ -4,10 +4,14 @@ import { Link } from "react-router-dom";
 import homeIcon from '../img/homeicon.png';
 import axios from 'axios';
 import './Contributors.css';
+import { color, motion } from "framer-motion";
 
 function Contributors() {
   const [contributors, setContributors] = useState([]);
-
+  const eventVariants = {
+    hidden: { opacity: 0, y: 40 },
+    visible: { opacity: 1, y: 0 },
+  };
   useEffect(() => {
     async function fetchContributors() {
       try {
@@ -30,7 +34,12 @@ function Contributors() {
         </Link>
       <div className="contributors-grid">
         {contributors.map((contributor) => (
-          <div key={contributor.id} className="contributor-card">
+          <motion.div  initial="hidden"
+          whileInView="visible"
+          whileHover={{ scale: 1.06 }}
+          viewport={{ once: true }}
+          variants={eventVariants}
+          transition={{ duration: 0.2, ease: "easeInOut" }} key={contributor.id} className="contributor-card">
             <a
               href={contributor.html_url}
               className="contributor-link"
@@ -47,7 +56,7 @@ function Contributors() {
             <p className="contributor-contributions">
               Contributions: {contributor.contributions}
             </p>
-          </div>
+          </motion.div>
         ))}
       </div>
     </div>