Stagger menu

Author: w3bdesign

src/components/Layout/Header.component.tsx

@@ -5,14 +5,12 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { motion } from "framer-motion";
 
-import { MotionDiv, MotionLi } from "@/lib/framer/client";
-import { useMobile } from "@/hooks/useMobile";
+import { MotionDiv, MotionLi, MotionUl } from "@/lib/framer/client";
 
 import MobileMenu from "./MobileMenu.component";
 
 export default function Header() {
   const pathname = usePathname();
-  const isMobile = useMobile();
 
   const links = [
     { title: "Home", name: "Hjem", hash: "#hjem", href: "/" },
@@ -36,25 +34,44 @@ export default function Header() {
     <header className="z-[999] relative">
       <MotionDiv
         className="bg-slate-800 bg-opacity-80 fixed top-0 left-1/2 h-[4.5rem] w-full shadow rounded-none shadow-lg shadow-black/[0.03] backdrop-blur-[0.5rem] sm:top-6 sm:h-[3.25rem] sm:w-[36rem] sm:rounded-full dark:bg-gray-900 dark:border-black/40 dark:bg-opacity-75"
-        //initial={isMobile ? { x: 0 } : { y: -50, x: "-50%", opacity: 0 }}
-        //animate={isMobile ? { x: 0 } : { y: 0, x: "-50%", opacity: 1 }}
-
-        initial={{ y: -50, x: "-50%", opacity: 0 }}
-        animate={{ y: 0, x: "-50%", opacity: 1 }}
-        transition={{ duration: 0.6 }}
-      ></MotionDiv>
-
+        initial={{ y: -100, x: "-50%", opacity: 0 }}
+        animate={{
+          y: 0,
+          x: "-50%",
+          opacity: 1,
+          transition: {
+            y: { duration: 0.6, ease: "easeOut" },
+            opacity: { duration: 0.6, ease: "easeOut" },
+          },
+        }}
+      />
       <nav className="flex fixed top-[0.65rem] left-1/2 h-12 -translate-x-1/2 py-2 sm:top-[1.7rem] sm:h-[initial] sm:py-0 w-full max-w-[370px] justify-end md:justify-between items-center">
-        <ul className="hidden md:flex md:w-[22rem] flex-wrap items-center justify-center gap-y-1 text-[0.9rem] font-medium text-slate-200 sm:w-[initial] sm:flex-nowrap sm:gap-5">
+        <MotionUl
+          className="hidden md:flex md:w-[22rem] flex-wrap items-center justify-center gap-y-1 text-[0.9rem] font-medium text-slate-200 sm:w-[initial] sm:flex-nowrap sm:gap-5"
+          variants={{
+            hidden: { opacity: 0 },
+            visible: {
+              opacity: 1,
+              transition: {
+                staggerChildren: 0.1,
+                delayChildren: 0.3,
+              },
+            },
+          }}
+          initial="hidden"
+          animate="visible"
+        >
           {links.map((link) => (
             <MotionLi
               className="h-3/4 flex items-center justify-center relative"
               key={link.hash}
-              initial={isMobile ? {} : { y: -50, opacity: 0 }}
-              animate={isMobile ? {} : { y: 0, opacity: 1 }}
-              transition={{ duration: 0.6 }}
+              variants={{
+                hidden: { y: -20, opacity: 0 },
+                visible: { y: 0, opacity: 1 },
+              }}
+              transition={{ duration: 0.3 }}
             >
-              <motion.div className="relative" whileHover="hover">
+              <MotionDiv className="relative" whileHover="hover">
                 <Link
                   prefetch={true}
                   className={`flex w-full items-center justify-center px-2 py-2 hover:text-white transition font-semibold text-lg ${
@@ -78,10 +95,10 @@ export default function Header() {
                     />
                   </div>
                 </Link>
-              </motion.div>
+              </MotionDiv>
             </MotionLi>
           ))}
-        </ul>
+        </MotionUl>
         <div id="hamburger-div" data-cy="hamburger-div" className="md:hidden">
           <MobileMenu links={links} />
         </div>

src/lib/framer/client.ts

@@ -4,3 +4,4 @@ import { motion } from "framer-motion";
 
 export const MotionDiv = motion.div;
 export const MotionLi = motion.li;
+export const MotionUl = motion.ul;