Header animation flashing bug fix

EthanBlake00 · Aug 18, 2024 · 5898141 · 5898141
1 parent 7306621
commit 5898141
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 15 deletions.
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -5,15 +5,19 @@ import Email from "@/components/ui/Email";
 import Lottie from "lottie-react";
 import {party} from "@/data";
 import {useGlobalContext} from "@/context/GlobalProvider";
+import {motion} from "framer-motion";
 
 const Header = () => {
     const {playPartyAnimation} = useGlobalContext();
     return (
-        <div className="w-full bg-primary pb-20 px-8 relative flex justify-between items-center">
+        <motion.div initial={{opacity: 0,y: '1vh'}} transition={{delay:.3,type: 'spring',stiffness: 100,damping: 10}}
+                    animate={{opacity: 1,y:0}}
+                    className="w-full bg-primary pb-20 px-8 relative flex justify-between items-center">
             <Logo/>
             <Email/>
-            {playPartyAnimation && ( <Lottie animationData={party} loop={false} className="w-24 absolute right-8 -top-6"/>)}
-        </div>
+            {playPartyAnimation && (
+                <Lottie animationData={party} loop={false} className="w-24 absolute right-8 -top-6"/>)}
+        </motion.div>
     );
 };
 

diff --git a/components/ui/Email.tsx b/components/ui/Email.tsx
@@ -1,5 +1,4 @@
 "use client"
-import {motion} from "framer-motion";
 import {BiCheck, BiCopy} from "react-icons/bi";
 import {useGlobalContext} from "@/context/GlobalProvider";
 
@@ -12,13 +11,12 @@ const Email = () => {
         setEmailCopied(true)
     }
     return (
-        <motion.button onClick={() => copyEmail()} initial={{opacity: 0, y: '1vh'}}
-                       transition={{duration: .5, delay: .5, type: "spring", damping: 10, stiffness: 100}}
-                       animate={{opacity: 1, y: 0}}
-                       className="border cursor-pointer absolute right-5 top-5 border-gray-900 rounded-lg gap-1 flex justify-center items-center transition-all w-fit p-1 md:p-2 ">
-            {emailCopied ? (<BiCheck className="md:w-8 w-5 h-5 md:h-8"/>) : (<BiCopy className="md:w-8 w-5 h-5 md:h-8"/>)}
+        <button onClick={() => copyEmail()}
+                className="border cursor-pointer absolute right-5 top-5 border-gray-900 rounded-lg gap-1 flex justify-center items-center transition-all w-fit p-1 md:p-2 ">
+            {emailCopied ? (<BiCheck className="md:w-8 w-5 h-5 md:h-8"/>) : (
+                <BiCopy className="md:w-8 w-5 h-5 md:h-8"/>)}
             <p className="font-bold text-sm md:text-lg">{emailCopied ? "Email Copied" : "Copy Email?"}</p>
-        </motion.button>
+        </button>
     )
 };
 

diff --git a/components/ui/Footer.tsx b/components/ui/Footer.tsx
@@ -8,7 +8,7 @@ import {motion} from "framer-motion";
 const Footer = () => {
     return (
         <motion.footer initial={{opacity: 0, y: '1vh'}}
-                       transition={{duration: .5, delay: .5, type: "spring", damping: 10, stiffness: 100}}
+                       transition={{duration: .5, delay: .3, type: "spring", damping: 10, stiffness: 100}}
                        animate={{opacity: 1, y: 0}}
                        className="w-full pt-5 flex flex-col px-4 gap-5 md:flex-row justify-between items-center pb-4 md:px-10">
             <p className="font-light text-gray-900 text-base md:text-xl">Copyright

diff --git a/components/ui/Logo.tsx b/components/ui/Logo.tsx
@@ -1,15 +1,15 @@
 "use client"
 import React from 'react';
 import Link from "next/link";
-import {motion} from "framer-motion";
+
 const Logo = () => {
     return (
-        <motion.div initial={{opacity:0,y:'1vh'}}  transition={{ duration:.5,delay: .5,type:"spring", damping:10, stiffness:100}} animate={{opacity:1,y:0}} className="bg-gray-900 transition-all w-fit p-1 md:p-2 absolute top-5 left-5">
-            <Link href="/" >
+        <div className="bg-gray-900 transition-all w-fit p-1 md:p-2 absolute top-5 left-5">
+            <Link href="/">
                 <h1 className="md:text-2xl text-lg font-bold text-white tracking-wider">NAD</h1>
                 <h1 className="md:text-2xl text-lg font-bold text-white tracking-wider">MAL</h1>
             </Link>
-        </motion.div>
+        </div>
     );
 };