When I provide the size as a percentage string, drawer is not animated and not closable

[devnull69]

I have implemented your radix-ui based drawer into my project. The given example works great

Now, I would like to open the drawer up to 50% of the viewport width, so I set

size={"50%"}

which will open the drawer to the correct size, but the opening is not animated and closing no longer works. Going back to

size={450}

makes things work again.

Any suggestions?

[devnull69]

My suggestion is the following change. It works, but it might delay the animation a bit because the drawer might be too far outside of the viewport.

  // Animation properties for framer-motion
  let initial, animate;
  switch (props.origin) {
    case "left":
      initial = { x: -window.innerWidth };
      animate = { x: 0 };
      break;
    case "right":
      initial = { x: window.innerWidth };
      animate = { x: 0 };
      break;
    case "top":
      initial = { y: -window.innerHeight };
      animate = { y: 0 };
      break;
    case "bottom":
      initial = { y: window.innerHeight };
      animate = { y: 0 };
      break;
  }

[jordan-sussman]

Hi @devnull69, thanks for reporting this issue. If you're experiencing issues with the drawer animating in/out of view, I'd like to call attention to the visible prop. The current build of this drawer component requires this prop for the component's default entry/exit animations. For more details on how to use and implement it, see the readme in this repository. If you're already using this prop and still experiencing this issue, let me know and I can investigate further. Thanks!

[devnull69]

Hi @jordan-sussman and thank you for your feedback

This is my (non-working) implementation ... and the visible prop is already part of it, right?

        <Drawer.Root open={drawerOpen} onOpenChange={setDrawerOpen}>
          <Drawer.Trigger>
            <div
              className={
                "drawer " +
                (designDirection === "rtl"
                  ? "rightsidedrawer rtl:rotate-180"
                  : "leftsidedrawer")
              }
            >
              <img src={drawerIcon} />
            </div>
          </Drawer.Trigger>
          <Drawer.Content
            className="content"
            origin={designDirection === "rtl" ? "right" : "left"} // Where the drawer opens from
            radius={10} // Border radius of the drawer
            size={"50%"} // Depth of the drawer
            visible={drawerOpen} // Required for animation
            style={{ paddingTop: "30px" }}
          >
            <Drawer.Title></Drawer.Title>
            <ReadOnlyViewWrapper />
          </Drawer.Content>
        </Drawer.Root>

[jordan-sussman]

@devnull69 thanks! Yeah, that looks correct. I'm currently on vacation but will investigate this when I return.

[jordan-sussman]

@devnull69 thanks for your patience! This should now be working per https://github.com/jordan-sussman/open-sesame/commit/f2f06458b0b2d994bce5340ef2da3c8018fc0d2e