diff --git a/package-lock.json b/package-lock.json
index a173543..c03084a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
                 "react": "^18.2.0",
                 "react-dom": "^18.2.0",
                 "react-icons": "^4.11.0",
+                "react-intersection-observer": "^9.5.3",
                 "react-leaflet": "^4.2.1",
                 "react-responsive": "^9.0.2",
                 "react-router-dom": "^6.3.0",
@@ -13563,6 +13564,14 @@
                 "react": "*"
             }
         },
+        "node_modules/react-intersection-observer": {
+            "version": "9.5.3",
+            "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.5.3.tgz",
+            "integrity": "sha512-NJzagSdUPS5rPhaLsHXYeJbsvdpbJwL6yCHtMk91hc0ufQ2BnXis+0QQ9NBh6n9n+Q3OyjR6OQLShYbaNBkThQ==",
+            "peerDependencies": {
+                "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+            }
+        },
         "node_modules/react-is": {
             "version": "16.13.1",
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index fdbe25d..37388e6 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-icons": "^4.11.0",
+        "react-intersection-observer": "^9.5.3",
         "react-leaflet": "^4.2.1",
         "react-responsive": "^9.0.2",
         "react-router-dom": "^6.3.0",
diff --git a/src/components/EventCard/EventCard.jsx b/src/components/EventCard/EventCard.jsx
index 688f4d1..9692773 100644
--- a/src/components/EventCard/EventCard.jsx
+++ b/src/components/EventCard/EventCard.jsx
@@ -1,10 +1,15 @@
+import { motion, useAnimation } from "framer-motion";
 import Image from "next/image";
 import Link from "next/link";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { FaCalendarAlt } from "react-icons/fa";
+import { useInView } from "react-intersection-observer";
 
 import Button from "../Buttons/Button";
+
 const EventCard = ({ t }) => {
+    const controls = useAnimation();
+    const [ref, inView] = useInView({ triggerOnce: true });
     const data = [
         {
             id: 1,
@@ -38,18 +43,33 @@ const EventCard = ({ t }) => {
         },
     ];
     const [event, setEvent] = useState(data);
+    useEffect(() => {
+        if (inView) {
+            controls.start({ opacity: 1, x: 0, y: 0 });
+        }
+    }, [controls, inView]);
     return (
-        <section className='p-4'>
+        <section className='p-4' ref={ref}>
             <div className='flex flex-col justify-center items-center shadow-lg border-t-2 bg-gray-200 pt-10 pb-5'>
                 <h1 className='mb-10 text-3xl font-bold text-[#585785]'>
                     {t("Upcoming Events")}
                 </h1>
                 <div className='mx-auto  lg:flex-row flex-col text-center  flex items-center overflow-hidden'>
-                    {event.map((event, eventIndex) => {
+                    {event.map((event, i) => {
                         const { id, image, title, description, date, link } =
                             event;
                         return (
-                            <div key={id} className='p-4 w-120 h-120  flex-1'>
+                            <motion.div
+                                key={id}
+                                className='p-4 w-120 h-120  flex-1'
+                                initial={{
+                                    opacity: 0,
+                                    x: i % 2 === 0 ? -50 : 50,
+                                    y: -50,
+                                }}
+                                animate={controls}
+                                transition={{ duration: 0.8, delay: i * 0.7 }}
+                            >
                                 <article
                                     className={` w-full   rounded-lg bg-white shadow-lg  `}
                                 >
@@ -90,7 +110,7 @@ const EventCard = ({ t }) => {
                                         </Button>
                                     </footer>
                                 </article>
-                            </div>
+                            </motion.div>
                         );
                     })}
                 </div>
diff --git a/src/components/EventCard/__test__/__snapshots__/EventCard.test.js.snap b/src/components/EventCard/__test__/__snapshots__/EventCard.test.js.snap
index 0285588..1b58f06 100644
--- a/src/components/EventCard/__test__/__snapshots__/EventCard.test.js.snap
+++ b/src/components/EventCard/__test__/__snapshots__/EventCard.test.js.snap
@@ -17,6 +17,12 @@ exports[`renders correctly 1`] = `
     >
       <div
         className="p-4 w-120 h-120  flex-1"
+        style={
+          Object {
+            "opacity": 0,
+            "transform": "translateX(-50px) translateY(-50px) translateZ(0)",
+          }
+        }
       >
         <article
           className=" w-full   rounded-lg bg-white shadow-lg  "
@@ -106,6 +112,12 @@ exports[`renders correctly 1`] = `
       </div>
       <div
         className="p-4 w-120 h-120  flex-1"
+        style={
+          Object {
+            "opacity": 0,
+            "transform": "translateX(50px) translateY(-50px) translateZ(0)",
+          }
+        }
       >
         <article
           className=" w-full   rounded-lg bg-white shadow-lg  "
@@ -195,6 +207,12 @@ exports[`renders correctly 1`] = `
       </div>
       <div
         className="p-4 w-120 h-120  flex-1"
+        style={
+          Object {
+            "opacity": 0,
+            "transform": "translateX(-50px) translateY(-50px) translateZ(0)",
+          }
+        }
       >
         <article
           className=" w-full   rounded-lg bg-white shadow-lg  "
diff --git a/src/components/LatestProducts/LatestProducts.jsx b/src/components/LatestProducts/LatestProducts.jsx
index 5acd205..f9b4658 100644
--- a/src/components/LatestProducts/LatestProducts.jsx
+++ b/src/components/LatestProducts/LatestProducts.jsx
@@ -1,6 +1,8 @@
 import { collection, onSnapshot, orderBy, query } from "firebase/firestore";
+import { motion, useAnimation } from "framer-motion";
 import Link from "next/link";
 import { useEffect, useState } from "react";
+import { useInView } from "react-intersection-observer";
 
 import { db } from "@/util/firebase";
 
@@ -9,6 +11,8 @@ import ProductCard from "../ProductCard/ProductCard";
 
 export default function LatestProducts({ t }) {
     const [products, setProducts] = useState([]);
+    const controls = useAnimation();
+    const [ref, inView] = useInView({ triggerOnce: true });
     useEffect(() => {
         const colRef = collection(db, "products");
         const q = query(colRef, orderBy("createdAt", "desc"));
@@ -21,14 +25,31 @@ export default function LatestProducts({ t }) {
             setProducts(latestProducts);
         });
     }, []);
+    useEffect(() => {
+        if (inView) {
+            controls.start({ opacity: 1, x: 0, y: 0 });
+        }
+    }, [controls, inView]);
     return (
-        <div className='flex flex-col justify-center items-center shadow-lg border-t-2 bg-gray-200 pt-10 pb-5'>
+        <div
+            ref={ref}
+            className='flex flex-col justify-center items-center shadow-lg border-t-2 bg-gray-200 pt-10 pb-5'
+        >
             <h1 className='mb-10 text-3xl font-bold text-[#585785]'>
                 {t("Recently Added")}
             </h1>
             <div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 mx-auto gap-4 lg:gap-8 place-items-center'>
-                {products?.map((product) => {
-                    return <ProductCard key={product.id} product={product} />;
+                {products?.map((product, i) => {
+                    return (
+                        <motion.div
+                            key={product.id}
+                            initial={{ opacity: 0, x: -50, y: -50 }}
+                            animate={controls}
+                            transition={{ duration: 0.4, delay: i * 0.3 }}
+                        >
+                            <ProductCard product={product} />
+                        </motion.div>
+                    );
                 })}
             </div>
             <Link href='/products'>
diff --git a/src/components/ProductsList/ProductsList.jsx b/src/components/ProductsList/ProductsList.jsx
index 35f7ca1..57c9f61 100644
--- a/src/components/ProductsList/ProductsList.jsx
+++ b/src/components/ProductsList/ProductsList.jsx
@@ -1,4 +1,6 @@
+import { motion } from "framer-motion";
 import { useEffect, useState } from "react";
+
 import ProductCard from "../ProductCard/ProductCard";
 
 export default function ProductsList({ products, t }) {
@@ -13,13 +15,21 @@ export default function ProductsList({ products, t }) {
             clearTimeout(timeoutId);
         };
     }, []);
+
     return (
         <div className='w-full sm:w-[80%] sm:mx-auto md:w-[70%] lg:w-[80%] xl:max-w-[1000px] py-5'>
             {products && products.length > 0 ? (
                 <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 place-items-center gap-x-3 gap-y-4 md:gap-x-0'>
-                    {products?.map((product) => {
+                    {products?.map((product, i) => {
                         return (
-                            <ProductCard key={product.id} product={product} />
+                            <motion.div
+                                key={product.id}
+                                initial={{ opacity: 0, x: -50, y: -50 }}
+                                animate={{ opacity: 1, x: 0, y: 0 }}
+                                transition={{ duration: 0.4, delay: i * 0.3 }}
+                            >
+                                <ProductCard product={product} />
+                            </motion.div>
                         );
                     })}
                 </div>