diff --git a/modules/NotifCenter.qml b/modules/NotifCenter.qml
index ccabba4..12eb862 100644
--- a/modules/NotifCenter.qml
+++ b/modules/NotifCenter.qml
@@ -83,6 +83,19 @@ M.PopupPanel {
 
             width: menuWindow.panelWidth
             height: notifContent.height + 12
+            opacity: 0
+
+            Component.onCompleted: fadeIn.start()
+            NumberAnimation {
+                id: fadeIn
+                target: notifItem
+                property: "opacity"
+                to: 1
+                duration: 150
+                easing.type: Easing.OutCubic
+                // Stagger by index
+                Component.onCompleted: fadeIn.from = 0
+            }
 
             Rectangle {
                 anchors.fill: parent
@@ -225,10 +238,20 @@ M.PopupPanel {
                     anchors.margins: -4
                     hoverEnabled: true
                     cursorShape: Qt.PointingHandCursor
-                    onClicked: M.NotifService.dismiss(notifItem.modelData.id)
+                    onClicked: _dismissAnim.start()
                 }
             }
 
+            NumberAnimation {
+                id: _dismissAnim
+                target: notifItem
+                property: "opacity"
+                to: 0
+                duration: 150
+                easing.type: Easing.InCubic
+                onFinished: M.NotifService.dismiss(notifItem.modelData.id)
+            }
+
             MouseArea {
                 id: notifArea
                 anchors.fill: parent
diff --git a/modules/NotifPopup.qml b/modules/NotifPopup.qml
index 8b346d6..2473f47 100644
--- a/modules/NotifPopup.qml
+++ b/modules/NotifPopup.qml
@@ -40,13 +40,15 @@ PanelWindow {
                 required property int index
 
                 width: popupCol.width
-                height: contentCol.height + 16
+                height: _targetHeight * _heightScale
                 opacity: 0
-                x: 50
+                x: 320
+                clip: true
 
-                Component.onCompleted: {
-                    slideIn.start();
-                }
+                readonly property real _targetHeight: contentCol.height + 16
+                property real _heightScale: 0
+
+                Component.onCompleted: slideIn.start()
 
                 ParallelAnimation {
                     id: slideIn
@@ -54,13 +56,21 @@ PanelWindow {
                         target: popupItem
                         property: "opacity"
                         to: 1
-                        duration: 200
+                        duration: 250
                         easing.type: Easing.OutCubic
                     }
                     NumberAnimation {
                         target: popupItem
                         property: "x"
                         to: 0
+                        duration: 350
+                        easing.type: Easing.OutBack
+                        easing.overshoot: 0.5
+                    }
+                    NumberAnimation {
+                        target: popupItem
+                        property: "_heightScale"
+                        to: 1
                         duration: 250
                         easing.type: Easing.OutCubic
                     }
@@ -200,11 +210,41 @@ PanelWindow {
                     }
                 }
 
+                ParallelAnimation {
+                    id: slideOut
+                    NumberAnimation {
+                        target: popupItem
+                        property: "opacity"
+                        to: 0
+                        duration: 200
+                        easing.type: Easing.InCubic
+                    }
+                    NumberAnimation {
+                        target: popupItem
+                        property: "x"
+                        to: 320
+                        duration: 250
+                        easing.type: Easing.InCubic
+                    }
+                    NumberAnimation {
+                        target: popupItem
+                        property: "_heightScale"
+                        to: 0
+                        duration: 200
+                        easing.type: Easing.InCubic
+                    }
+                    onFinished: M.NotifService.dismissPopup(popupItem.modelData.id)
+                }
+
+                function animateDismiss() {
+                    slideOut.start();
+                }
+
                 // Click to dismiss
                 MouseArea {
                     anchors.fill: parent
                     z: -1
-                    onClicked: M.NotifService.dismissPopup(popupItem.modelData.id)
+                    onClicked: popupItem.animateDismiss()
                 }
             }
         }