[bug]: animation behavior for the Dialog component

[mo1nammad]

Describe the bug

The default animation behavior for the DialogContent component does not match the preview shown on the ShadCN UI website. The transition effect when opening and closing the dialog feels unnatural and creates an unpleasant user experience.

he following classnames are causing the unexpected animation behavior:

data-[state=closed]:slide-out-to-left-1/2 
data-[state=closed]:slide-out-to-top-[48%] 
data-[state=open]:slide-in-from-left-1/2 
data-[state=open]:slide-in-from-top-[48%]

• When the dialog opens, it slides in diagonally from the left and top, which feels jarring.
• When closing, it moves diagonally in the opposite direction, making the animation look unnatural.
• This behavior is inconsistent with the smooth, centered zoom-in/zoom-out effect shown in the preview.

I was able to fix this by removing the problematic classes and only keeping the zoom and fade animations:

Environment
Tailwindcss : 4.0.6
tailwindcss-animate: "^1.0.7",
tailwindcss: "^4.0.6",
ShadCN UI latest version
React :19

Affected component/components

Dialog

How to reproduce

Use the default Dialog component from ShadCN UI.
Open and close the dialog multiple times.
Notice the unexpected diagonal sliding effect.

Codesandbox/StackBlitz link

No response

Logs

System Info

Linux

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[dinkopehar]

Happens to me also while working. On https://ui.shadcn.com/docs/components/dialog it does not happen, copying the example (Custom Close Button) it slides from left top and slides back on pressing X.