diff --git a/packages/raystack/components/drawer/drawer.module.css b/packages/raystack/components/drawer/drawer.module.css
index ccf1ed7a0..647e6e212 100644
--- a/packages/raystack/components/drawer/drawer.module.css
+++ b/packages/raystack/components/drawer/drawer.module.css
@@ -73,6 +73,7 @@
 .drawerPopup-right {
   width: 250px;
   height: 100%;
+  transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1);
   transform: translateX(var(--drawer-swipe-movement-x));
 }
 
@@ -89,6 +90,7 @@
 .drawerPopup-left {
   width: 250px;
   height: 100%;
+  transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1);
   transform: translateX(var(--drawer-swipe-movement-x));
 }
 
@@ -105,6 +107,7 @@
 .drawerPopup-top {
   width: 100%;
   height: 300px;
+  transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1);
   transform: translateY(var(--drawer-swipe-movement-y));
 }
 
@@ -121,6 +124,7 @@
 .drawerPopup-bottom {
   width: 100%;
   height: 300px;
+  transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1);
   transform: translateY(var(--drawer-swipe-movement-y));
 }
 
@@ -197,11 +201,9 @@
   border-top: 1px solid var(--rs-color-border-base-primary);
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .drawerPopup-right,
-  .drawerPopup-left,
-  .drawerPopup-top,
-  .drawerPopup-bottom {
-    transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1);
+@media (prefers-reduced-motion: reduce) {
+  .drawerPopup,
+  .backdrop {
+    transition: none;
   }
 }