Motion
Cookbook

Side Drawer

Interactive

For our animated side drawer, we'll use an absolute positioned motion.div, and animate its left property based on the isOpen flag.

<motion.div
  className="drawer"
  initial={{ left: "100%" }}
  animate={{ left: isOpen ? "66%" : "100%" }}
/>