Added Animation

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",

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>

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>
         );
       })}
     </>