home page animation add

package.json

@@ -12,6 +12,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "framer-motion": "^10.16.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.11.0"

src/App.css

@@ -2,3 +2,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body{
+    overflow-x: hidden;
+}

src/Components/Features.jsx

@@ -1,45 +1,111 @@
 import { Link } from "react-router-dom";
+import { motion, useAnimation } from "framer-motion";
+import React, { useEffect, useRef } from "react";
 
 export default function Features() {
+  const animationControls = {
+    hidden: { opacity: 0, x: -500 },
+    visible: { opacity: 1, x: 0 },
+  };
+
+  const sectionRef = useRef(null);
+
+  useEffect(() => {
+    const sectionObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            // When the section is in the viewport, trigger the animation
+            animationControls.visible && sectionControls.start("visible");
+          } else {
+            // When the section is out of the viewport, reset the animation
+            animationControls.hidden && sectionControls.start("hidden");
+          }
+        });
+      },
+      {
+        root: null,
+        rootMargin: "0px",
+        threshold: 0.5, // Adjust the threshold as needed
+      },
+    );
+
+    if (sectionRef.current) {
+      sectionObserver.observe(sectionRef.current);
+    }
+
+    return () => {
+      if (sectionRef.current) {
+        sectionObserver.unobserve(sectionRef.current);
+      }
+    };
+  }, []);
+
+  const sectionControls = useAnimation();
+
   return (
     <>
-      <div className="text-white bg-gradient-to-r from-[#FF86C8] to-[#FBA277]">
-        <h1 className="flex font-josh font-bold justify-center text-7xl pt-20">
-          Ready to make some noise?
-        </h1>
-        <div className="flex text-3xl justify-center items-center font-josh">Bringing Harmony to Your Ears.</div>
-        <div className="flex gap-16 justify-center items-center font-josh">
-          <div className="gap-[2rem] flex flex-col">
-            <h1 className="text-6xl p-5">Get Started With Beat Bridge</h1>
-            <ul className="text-xl font-bold list-disc pl-5">
-              <li className="text-2xl">Who are we:</li>
-              <ul className="text-lg list-disc pl-5">
-                <li>We are passionate about connecting people with music</li>
+      <div
+        ref={sectionRef}
+        className="text-white bg-gradient-to-r from-[#FF86C8] to-[#FBA277]"
+      >
+        <div>
+          <div>
+            <h1 className="flex font-josh font-bold justify-center text-7xl pt-20">
+              Ready to make some noise?
+            </h1>
+            <div className="flex text-3xl justify-center items-center font-josh">
+              Bringing Harmony to Your Ears.
+            </div>
+          </div>
+          <div className="flex gap-16 justify-center items-center font-josh">
+            <motion.div
+              initial="hidden"
+              animate={sectionControls}
+              exit="hidden"
+              variants={animationControls}
+              transition={{ duration: 0.5 }}
+              className="gap-[2rem] flex flex-col"
+            >
+              <h1 className="text-6xl p-5">Get Started With Beat Bridge</h1>
+              <ul className="text-xl font-bold list-disc pl-5">
+                <li className="text-2xl">Who are we:</li>
+                <ul className="text-lg list-disc pl-5">
+                  <li>We are passionate about connecting people with music</li>
+                </ul>
               </ul>
-            </ul>
-            <ul className="text-xl list-disc pl-5">
-              <li className="text-3xl">Our Mission:</li>
-              <ul className="text-2xl font-bold list-disc pl-5">
-                <li className="text-xl">
-                  To provide a platform that resonates with every music lover
-                </li>
+              <ul className="text-xl list-disc pl-5">
+                <li className="text-3xl">Our Mission:</li>
+                <ul className="text-2xl font-bold list-disc pl-5">
+                  <li className="text-xl">
+                    To provide a platform that resonates with every music lover
+                  </li>
+                </ul>
               </ul>
-            </ul>
-            <Link
-              to={"/player"}
+              <Link to={"/player"}>
+                <button className="rounded-full font-bold bg-slate-100 px-6 py-2 shadow-xl hover:shadow-inner transition-all ease-in duration-200 text-2xl text-[#9a3412] tracking-wide">
+                  GET STARTED
+                </button>
+              </Link>
+            </motion.div>
+            <motion.div
+              initial="hidden"
+              animate={sectionControls}
+              exit="hidden"
+              variants={{
+                hidden: { opacity: 0, x: 500 },
+                visible: { opacity: 1, x: 0 },
+              }}
+              transition={{ duration: 0.5 }}
+              className="flex flex-col items-center justify-center mb-40"
             >
-              <button className="rounded-full font-bold bg-slate-100 px-6 py-2 shadow-xl hover:shadow-inner transition-all ease-in duration-200 text-2xl text-[#9a3412] tracking-wide">
-                GET STARTED
-              </button>
-            </Link>
-          </div>
-          <div className="flex flex-col items-center justify-center mb-40">
-            <img
-              src="./guitar.png"
-              className="relative top-[13rem] right-[1.5rem] w-64 h-64 z-10 rounded-full"
-              alt="guitat_img"
-            />
-            <div className="rounded-full w-64 z-0 h-64 bg-violet-800/60"></div>
+              <img
+                src="./guitar.png"
+                className="relative top-[13rem] right-[1.5rem] w-64 h-64 z-10 rounded-full"
+                alt="guitat_img"
+              />
+              <div className="rounded-full w-64 z-0 h-64 bg-violet-800/60"></div>
+            </motion.div>
           </div>
         </div>
       </div>

src/Components/Home.jsx

@@ -1,18 +1,70 @@
+import React, { useEffect, useRef } from "react";
+import { motion, useAnimation } from "framer-motion";
 import Background from "/Background.png";
 import PageThree from "./PageThree";
 import Features from "./Features";
 import Navbar from "./Navbar";
 
 export default function Home() {
+  const animationControls = {
+    hidden: { opacity: 0, y: 75 },
+    visible: { opacity: 1, y: 0 },
+  };
+
+  const sectionRef = useRef(null);
+
+  useEffect(() => {
+    const sectionObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            // When the section is in the viewport, trigger the animation
+            animationControls.visible && sectionControls.start("visible");
+          } else {
+            // When the section is out of the viewport, reset the animation
+            animationControls.hidden && sectionControls.start("hidden");
+          }
+        });
+      },
+      {
+        root: null,
+        rootMargin: "0px",
+        threshold: 0.5, // Adjust the threshold as needed
+      }
+    );
+
+    if (sectionRef.current) {
+      sectionObserver.observe(sectionRef.current);
+    }
+
+    return () => {
+      if (sectionRef.current) {
+        sectionObserver.unobserve(sectionRef.current);
+      }
+    };
+  }, []);
+
+  const sectionControls = useAnimation();
+
 
   return (
     <>
-      <div className="bg-cover bg-center font-josh">
-        <img src={Background} alt="background img" className="mt-[-2%] w-[100%]" />
+      <div ref={sectionRef} className="bg-cover bg-center font-josh">
+        <img
+          src={Background}
+          alt="background img"
+          className="mt-[-2%] w-[100%]"
+        />
       </div>
       <div className="absolute inset-0 items-center text-center justify-center">
-        <Navbar/>
-        <div className="mt-48 text-white">
+        <Navbar />
+        <motion.div
+          initial="hidden"
+          variants={animationControls}
+          animate={sectionControls}
+          transition={{ duration: 0.5, delay: 0.25 }}
+          className="mt-48 text-white"
+        >
           <p className="font-bold text-3xl tracking-tight">
             Your Gateway to a World of Rhythm
           </p>
@@ -22,11 +74,11 @@ export default function Home() {
           <button className="rounded-full mt-20 font-bold bg-slate-100 px-6 py-2 shadow-xl hover:shadow-inner transition-all ease-in duration-200 text-2xl text-[#9a3412] tracking-wide">
             Explore
           </button>
-        </div>
+        </motion.div>
       </div>
- 
+
       <Features />
-      <PageThree /> 
+      <PageThree />
     </>
   );
 }