Sidebar Nav Animations

Overlay

// Before — overlay snaps in with no transition
<div className={`fixed inset-0 bg-black/50
  ${isOpen ? "opacity-100" : "opacity-0 pointer-events-none"}`} />

// After — overlay fades in over 300ms
<div className={`fixed inset-0 bg-black/50
  transition-opacity duration-300 ease-in-out
  ${isOpen ? "opacity-100" : "opacity-0 pointer-events-none"}`} />

Nav + Ribbon

// Before — plain nav, items appear instantly
<nav>
  {tabs.map((tab) => <button key={tab}>{tab}</button>)}
</nav>

// After — spring stagger with blur
<motion.nav
  animate={isOpen ? "open" : "closed"}
  variants={{
    open: {
      transition: {
        staggerChildren: 0.04,
        delayChildren: 0.18,
      },
    },
  }}
>
  {tabs.map((tab) => (
    <motion.button
      key={tab}
      variants={{
        open: {
          opacity: 1, filter: "blur(0px)", y: 0,
          transition: { type: "spring", stiffness: 400, damping: 28 },
        },
        closed: { opacity: 0, filter: "blur(4px)", y: -4 },
      }}
    />
  ))}
</motion.nav>

// Ribbon — springs in after drawer settles
<motion.div
  animate={{ scaleY: isOpen ? 1 : 0 }}
  style={{ transformOrigin: "top center" }}
  transition={{ type: "spring", stiffness: 400, damping: 28, delay: 0.45 }}
/>