diff --git a/applets/systemtray/package/contents/ui/PlasmoidPopupsContainer.qml b/applets/systemtray/package/contents/ui/PlasmoidPopupsContainer.qml
index 86e4b5340..054c657c1 100644
--- a/applets/systemtray/package/contents/ui/PlasmoidPopupsContainer.qml
+++ b/applets/systemtray/package/contents/ui/PlasmoidPopupsContainer.qml
@@ -4,9 +4,9 @@
     SPDX-License-Identifier: LGPL-2.0-or-later
 */
 
-import QtQuick 2.4
+import QtQuick 2.15
 import QtQuick.Layouts 1.1
-import QtQuick.Controls 1.4
+import QtQuick.Controls 2.15
 //needed for units
 import org.kde.plasma.core 2.0 as PlasmaCore
 import org.kde.plasma.components 3.0 as PlasmaComponents3
@@ -55,7 +55,7 @@ StackView {
                 }
             }
 
-            mainStack.replace({item: activeApplet.fullRepresentationItem, immediate: !systemTrayState.expanded, properties: {focus: true}});
+            mainStack.replace(activeApplet.fullRepresentationItem, {focus: true}, systemTrayState.expanded ? StackView.Transition : StackView.Immediate);
         } else {
             mainStack.replace(emptyPage);
         }
@@ -80,67 +80,55 @@ StackView {
         id: emptyPage
     }
 
-    delegate: StackViewDelegate {
-        id: transitioner
-        function transitionFinished(properties) {
-            properties.exitItem.opacity = 1
-        }
-        property bool goingLeft: {
-            const unFlipped = systemTrayState.oldVisualIndex < systemTrayState.newVisualIndex
+    property bool goingLeft: {
+        const unFlipped = systemTrayState.oldVisualIndex < systemTrayState.newVisualIndex
 
-            if (Qt.application.layoutDirection == Qt.LeftToRight) {
-                return unFlipped
-            } else {
-                return !unFlipped
-            }
+        if (Qt.application.layoutDirection == Qt.LeftToRight) {
+            return unFlipped
+        } else {
+            return !unFlipped
         }
-        replaceTransition: StackViewTransition {
-            ParallelAnimation {
-                PropertyAnimation {
-                    target: enterItem
-                    property: "x"
-                    from: root.vertical ? 0 : (transitioner.goingLeft ? enterItem.width : -enterItem.width)
-                    to: 0
-                    easing.type: Easing.InOutQuad
-                    duration: PlasmaCore.Units.shortDuration
-                }
-                SequentialAnimation {
-                    PropertyAction {
-                        target: enterItem
-                        property: "opacity"
-                        value: 0
-                    }
-                    PauseAnimation {
-                        duration: root.vertical ? (PlasmaCore.Units.shortDuration/2) : 0
-                    }
-                    PropertyAnimation {
-                        target: enterItem
-                        property: "opacity"
-                        from: 0
-                        to: 1
-                        easing.type: Easing.InOutQuad
-                        duration: (PlasmaCore.Units.shortDuration/2)
-                    }
-                }
+    }
+    replaceEnter: Transition {
+        PropertyAnimation {
+            id: xani
+            property: "x"
+            from: root.vertical ? 0 : (mainStack.goingLeft ? mainStack.width : -mainStack.width)
+            to: 0
+            easing.type: Easing.InOutQuad
+            duration: PlasmaCore.Units.shortDuration
+        }
+       SequentialAnimation {
+            PropertyAction {
+                property: "opacity"
+                value: 0
             }
-            ParallelAnimation {
-                PropertyAnimation {
-                    target: exitItem
-                    property: "x"
-                    from: 0
-                    to: root.vertical ? 0 : (transitioner.goingLeft ? -exitItem.width : exitItem.width)
-                    easing.type: Easing.InOutQuad
-                    duration: PlasmaCore.Units.shortDuration
-                }
-                PropertyAnimation {
-                    target: exitItem
-                    property: "opacity"
-                    from: 1
-                    to: 0
-                    easing.type: Easing.InOutQuad
-                    duration: PlasmaCore.Units.shortDuration/2
-                }
+            PauseAnimation {
+                duration: root.vertical ? (PlasmaCore.Units.shortDuration/2) : 0
+            }
+            PropertyAnimation {
+                property: "opacity"
+                from: 0
+                to: 1
+                easing.type: Easing.InOutQuad
+                duration: (PlasmaCore.Units.shortDuration/2)
             }
         }
     }
+    replaceExit: Transition {
+        PropertyAnimation {
+            property: "x"
+            from: 0
+            to: root.vertical ? 0 : (mainStack.goingLeft ? -mainStack.width : mainStack.width)
+            easing.type: Easing.InOutQuad
+            duration: PlasmaCore.Units.shortDuration
+        }
+        PropertyAnimation {
+            property: "opacity"
+            from: 1
+            to: 0
+            easing.type: Easing.InOutQuad
+            duration: PlasmaCore.Units.shortDuration/2
+        }
+    }
 }