diff --git a/components/mobileshell/qml/actiondrawer/ActionDrawer.qml b/components/mobileshell/qml/actiondrawer/ActionDrawer.qml
index 152e4241..f4035530 100644
--- a/components/mobileshell/qml/actiondrawer/ActionDrawer.qml
+++ b/components/mobileshell/qml/actiondrawer/ActionDrawer.qml
@@ -19,6 +19,8 @@ import org.kde.plasma.private.mobileshell.quicksettingsplugin as QS
 Item {
     id: root
 
+    visible: false
+
     /**
      * The model for the notification widget.
      */
@@ -133,44 +135,45 @@ Item {
         oldOffset = offset;
 
         // close panel immediately after panel is not shown, and the flickable is not being dragged
-        if (opened && root.offset <= 0 && !swipeArea.moving && !closeAnim.running && !openAnim.running) {
-            root.updateState();
+        if (opened && root.offset <= 0 && !swipeArea.moving && !drawerAnimation.running) {
+            root.state = "";
+            offset = 0;
             focus = false;
+            root.opened = false;
+            root.updateState();
         }
     }
 
     function cancelAnimations() {
-        closeAnim.stop();
-        openAnim.stop();
-    }
+        root.state = "";
+     }
 
     function open() {
         cancelAnimations();
         if (openToPinnedMode) {
-            openAnim.restart(); // go to pinned height
+            root.state = "open"; // go to pinned height
         } else {
-            expandAnim.restart(); // go to maximized height
+            root.state = "expand"; // go to maximized height
         }
     }
 
     function closeImmediately() {
         cancelAnimations();
         offset = 0;
-        closeAnim.finished();
+        root.state = "close";
     }
 
     function close() {
         cancelAnimations();
-        closeAnim.restart();
+        root.state = "close";
     }
 
     function expand() {
         cancelAnimations();
-        expandAnim.restart();
+        root.state = "expand";
     }
 
     function updateState() {
-        cancelAnimations();
         let openThreshold = Kirigami.Units.gridUnit;
 
         if (root.offset <= 0) {
@@ -208,29 +211,55 @@ Item {
         onTriggered: updateState()
     }
 
-    PropertyAnimation on offset {
-        id: closeAnim
-        duration: Kirigami.Units.veryLongDuration
-        easing.type: Easing.OutExpo
-        to: 0
-        onFinished: {
-            root.visible = false;
-            root.opened = false;
+    state: "close"
+
+    states: [
+        State {
+            name: ""
+            PropertyChanges {
+                target: root; offset: offset
+            }
+        },
+        State {
+            name: "close"
+            PropertyChanges {
+                target: root; offset: 0
+            }
+        },
+        State {
+            name: "open"
+            PropertyChanges {
+                target: root; offset: contentContainerLoader.minimizedQuickSettingsOffset
+            }
+        },
+        State {
+            name: "expand"
+            PropertyChanges {
+                target: root; offset: contentContainerLoader.maximizedQuickSettingsOffset
+            }
+        }
+    ]
+
+    transitions: Transition {
+        SequentialAnimation {
+            PropertyAnimation {
+                id: drawerAnimation
+                properties: "offset"; easing.type: Easing.OutExpo; duration: root.state != "" ? Kirigami.Units.veryLongDuration : 0
+            }
+            ScriptAction {
+                script: {
+                    if (root.state != "") {
+                        if (root.offset <= 0) {
+                            root.visible = false;
+                            root.opened = false;
+                            root.state = "";
+                        } else {
+                            root.opened = true;
+                        }
+                    }
+                }
+            }
         }
-    }
-    PropertyAnimation on offset {
-        id: openAnim
-        duration: Kirigami.Units.veryLongDuration
-        easing.type: Easing.OutExpo
-        to: contentContainerLoader.minimizedQuickSettingsOffset
-        onFinished: root.opened = true
-    }
-    PropertyAnimation on offset {
-        id: expandAnim
-        duration: Kirigami.Units.veryLongDuration
-        easing.type: Easing.OutExpo
-        to: contentContainerLoader.maximizedQuickSettingsOffset
-        onFinished: root.opened = true;
     }
 
     MobileShell.SwipeArea {
diff --git a/components/mobileshell/qml/widgets/mediacontrols/MediaControlsWidget.qml b/components/mobileshell/qml/widgets/mediacontrols/MediaControlsWidget.qml
index e3d170c9..9eabeace 100644
--- a/components/mobileshell/qml/widgets/mediacontrols/MediaControlsWidget.qml
+++ b/components/mobileshell/qml/widgets/mediacontrols/MediaControlsWidget.qml
@@ -21,17 +21,19 @@ Item {
     visible: sourceRepeater.count > 0
 
     property bool detailledView: false
-    readonly property real heightMultiplier: detailledView ? 2 : 1
 
     readonly property real padding: Kirigami.Units.gridUnit
-    readonly property real contentHeight: Kirigami.Units.gridUnit * 2 * heightMultiplier
+    readonly property real contentHeight: {
+        let heightMultiplier = detailledView ? 2 : 1
+        Kirigami.Units.gridUnit * 2 * heightMultiplier
+    }
     implicitHeight: visible ? padding * 2 + contentHeight : 0
 
     Behavior on implicitHeight {
-        NumberAnimation {
-            duration: Kirigami.Units.shortDuration
-            easing.type: Easing.InOutQuad
-        }
+       NumberAnimation {
+           duration: implicitHeight == 0 ? 0 : Kirigami.Units.shortDuration
+           easing.type: Easing.InOutQuad
+       }
     }
 
     MediaControlsSource {