Open Tenuka22 opened 2 weeks ago
<nav id="nav-bar" class="fixed left-0 top-0 z-50 grid h-24 w-full grid-cols-[0.8fr,2fr,1fr] grid-rows-1 place-content-start bg-background/90 px-6 text-sm text-foreground shadow-sm" style="transform: none;"></nav>
Motion Components add a transform:none style, Not all the motion components specificlly the ones that has 'fixed' position ( in my project )
`<motion.nav initial={{ translateY: "-100%", scaleY: 0.8 }} animate={{ translateY: 0, scaleY: 1, }} transition={{ duration: 0.4, delay: 0.1, type: "spring", stiffness: 30, }} id="nav-bar" className="fixed left-0 top-0 z-50 grid h-24 w-full grid-cols-[0.8fr,2fr,1fr] grid-rows-1 place-content-start bg-background/90 px-6 text-sm text-foreground shadow-sm"
`
`@tailwind base;
@tailwind components; @tailwind utilities;
@layer base { body { @apply min-h-screen bg-background/95 font-poppins text-foreground selection:bg-foreground/30; } main { @apply relative h-full w-full pt-24; } } ` This isnt a motion.nav self closed tag there are items but I only added the nav ,
<nav id="nav-bar" class="fixed left-0 top-0 z-50 grid h-24 w-full grid-cols-[0.8fr,2fr,1fr] grid-rows-1 place-content-start bg-background/90 px-6 text-sm text-foreground shadow-sm" style="transform: none;"></nav>Motion Components add a transform:none style, Not all the motion components specificlly the ones that has 'fixed' position ( in my project )
`<motion.nav initial={{ translateY: "-100%", scaleY: 0.8 }} animate={{ translateY: 0, scaleY: 1, }} transition={{ duration: 0.4, delay: 0.1, type: "spring", stiffness: 30, }} id="nav-bar" className="fixed left-0 top-0 z-50 grid h-24 w-full grid-cols-[0.8fr,2fr,1fr] grid-rows-1 place-content-start bg-background/90 px-6 text-sm text-foreground shadow-sm"
@tailwind components; @tailwind utilities;
@layer base { body { @apply min-h-screen bg-background/95 font-poppins text-foreground selection:bg-foreground/30; } main { @apply relative h-full w-full pt-24; } } ` This isnt a motion.nav self closed tag there are items but I only added the nav ,