Animation Stops Working When Programmatically Opening and Closing Drawer

[Dave-lab12]

Describe the bug

I've encountered an issue where the animation for the drawer component ceases to function after programmatically opening and closing it. When using the Drawer.Trigger method, the animations perform as expected, smoothly opening and closing the drawer. However, when I attempt to control the drawer's visibility through direct programmatic methods, the animation no longer works. The drawer still opens and closes but without the intended animation, resulting in a less fluid user experience.

Reproduction

https://stackblitz.com/edit/vitejs-vite-pzyvfm?file=src%2FApp.svelte

Logs

No response

System Info

System:
    OS: macOS 14.3
    CPU: (10) arm64 Apple M2 Pro
    Memory: 113.78 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.0 - 
    npm: 10.2.5 - 
    pnpm: 8.15.0 -
  Browsers:
    Chrome: 121.0.6167.139
    Safari: 17.3
  npmPackages:
    @sveltejs/kit: ^2.3.3 => 2.3.3 
    svelte: 4.2.8 => 4.2.8 
    typescript: ^5.3.3 => 5.3.3 
    vaul-svelte: ^0.2.2 => 0.2.2

Severity

annoyance

[huntabyte]

33 fixes this

[Dave-lab12]

Thank you Quick question: when I programmatically close the drawer it is not animating is that by design choice Repo: https://stackblitz.com/edit/vitejs-vite-pzyvfm?file=package.json

https://github.com/huntabyte/vaul-svelte/assets/56738450/209c6264-2b5e-4719-8101-27611e6bb184

[mateuszlewko]

The latest updates almost fixes the issue.

There are two remaining problems with programatic opening and closing of the drawer:

1. onOpenChange from Drawer.Root is not fired on opening.
2. body background is not set to at all (while it should be to black) when opening.

Should I create a new issue for those?

[psntr]

Can we re-open this issue please?

I'm also experiencing the same bug with programmatically closing the Drawer…

[lgraubner]

It does not work for me as well. I added bind:open and set open to false from inside the modal and no animation (neither modal nor overlay) is visible. Uncontrolled usage works as expected.

[mateuszlewko]

My workaround:

// Drawer.svelte from shadcn-svelte.
// ...
export let open: $$Props['open'] = false;

$: (async () => {
  if (!browser) {
      return;
  }

  if (open) {
      await sleep(10);
      document.body.style.background = '#000000';
  } else {
      await sleep(350);
          // Default body color, change according to your needs.
      document.body.style.background = '#ffffff';
  }
})();

[sadfun]

+1, still not working. When you control drawer with bind:open, there is animation on open = true, but no animation on open = false. Can we re-open this?

[shyakadavis]

Hi;

Best to track it through this https://github.com/huntabyte/vaul-svelte/issues/52

In the meantime, input/feedback on this, https://github.com/huntabyte/vaul-svelte/issues/52#issuecomment-1943007872, would be good.