From 8af20b371a4dfaa54f304513e4afc824f398d9f5 Mon Sep 17 00:00:00 2001
From: Ayushmaanagarwal1121 <agarwalayushmaan88@gmail.com>
Date: Sat, 27 Jul 2024 11:01:06 +0530
Subject: [PATCH] Added Animation

---
 package-lock.json                       | 30 +++++++++++++++++++++++++
 package.json                            |  1 +
 src/pages/Contributors/Contributors.jsx | 17 +++++++++++++-
 src/pages/blog/blog.jsx                 | 16 +++++++++++++
 4 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 19a79fc..a9ce493 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
         "bootstrap": "^4.6.2",
         "custom-react-inner-image-zoom": "^3.0.6",
         "firebase": "^9.23.0",
+        "framer-motion": "^11.3.18",
         "leaflet": "^1.9.4",
         "nanoid": "^5.0.7",
         "otp-input-react": "^0.3.0",
@@ -10462,6 +10463,35 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.3.18",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.3.18.tgz",
+      "integrity": "sha512-pPJXcshW+AABch6FQxFCeBd/bZFaZC2w/VdkSEZGvKIaVGA4IsOS2SqUEIWMKMJJsKwr96O+7vY66M+/S7mOlw==",
+      "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/framer-motion/node_modules/tslib": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
+      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ=="
+    },
     "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 7ca4170..274d19c 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "bootstrap": "^4.6.2",
     "custom-react-inner-image-zoom": "^3.0.6",
     "firebase": "^9.23.0",
+    "framer-motion": "^11.3.18",
     "leaflet": "^1.9.4",
     "nanoid": "^5.0.7",
     "otp-input-react": "^0.3.0",
diff --git a/src/pages/Contributors/Contributors.jsx b/src/pages/Contributors/Contributors.jsx
index 843651a..a66693a 100644
--- a/src/pages/Contributors/Contributors.jsx
+++ b/src/pages/Contributors/Contributors.jsx
@@ -2,10 +2,14 @@ import React, { useEffect, useState } from 'react';
 import './style.css';
 import axios from 'axios';
 import { Card, CardContent, CardMedia, Grid, Typography } from '@mui/material';
+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(() => {
     window.scrollTo(0, 0);
     async function fetchContributors() {
@@ -27,6 +31,16 @@ function Contributors() {
       <h1 className="contributor-text">Our Contributors</h1>
       <Grid className="container-grid">
         {contributors.map((contributor) => (
+          <motion.div
+          initial="hidden"
+          whileInView="visible"
+          // whileHover={{ scale: 1.10 }}
+          viewport={{ once: true }}
+          variants={eventVariants}
+          transition={{ duration: 0.9, ease: "easeInOut" }}
+        
+         
+        >  
           <Grid item key={contributor.id}>
             <Card className="card">
               <a
@@ -70,6 +84,7 @@ function Contributors() {
               </CardContent>
             </Card>
           </Grid>
+          </motion.div>
         ))}
       </Grid>
     </div>
diff --git a/src/pages/blog/blog.jsx b/src/pages/blog/blog.jsx
index 0a11d4e..c716a98 100644
--- a/src/pages/blog/blog.jsx
+++ b/src/pages/blog/blog.jsx
@@ -4,8 +4,13 @@ import { categories, blogs } from './data';
 import { ArrowRightAltRounded } from '@mui/icons-material';
 import Slider from 'react-slick';
 import { MyContext } from '../../App';
+import { color, motion } from "framer-motion";
 
 function Blog() {
+  const eventVariants = {
+    hidden: { opacity: 0, y: 40 },
+    visible: { opacity: 1, y: 0 },
+  };
   return (
     <>
       <section class="top">
@@ -20,11 +25,22 @@ function Blog() {
       />
       {categories.map((cat) => {
         return (
+          <motion.div
+          initial="hidden"
+          whileInView="visible"
+          // whileHover={{ scale: 1.10 }}
+          viewport={{ once: true }}
+          variants={eventVariants}
+          transition={{ duration: 0.5, ease: "easeInOut" }}
+        
+         
+        >  
           <StoriesList
             title={cat.name}
             categoryId={cat.id}
             list={blogs.filter((blog) => blog.category === cat.id).slice(0, 4)}
           />
+          </motion.div>
         );
       })}
     </>