notifications: Refactor Animations

quickshell/Common/Theme.qml

@@ -702,13 +702,13 @@ Singleton {
     readonly property int currentAnimationSpeed: typeof SettingsData !== "undefined" ? SettingsData.animationSpeed : SettingsData.AnimationSpeed.Short
     readonly property var currentDurations: animationDurations[currentAnimationSpeed] || animationDurations[SettingsData.AnimationSpeed.Short]
 
-    property int shorterDuration: currentDurations.shorter
+    readonly property int shorterDuration: (typeof SettingsData !== "undefined" && SettingsData.animationSpeed === SettingsData.AnimationSpeed.Custom) ? SettingsData.customAnimationDuration : currentDurations.shorter
-    property int shortDuration: currentDurations.short
+    readonly property int shortDuration: (typeof SettingsData !== "undefined" && SettingsData.animationSpeed === SettingsData.AnimationSpeed.Custom) ? SettingsData.customAnimationDuration : currentDurations.short
-    property int mediumDuration: currentDurations.medium
+    readonly property int mediumDuration: (typeof SettingsData !== "undefined" && SettingsData.animationSpeed === SettingsData.AnimationSpeed.Custom) ? SettingsData.customAnimationDuration : currentDurations.medium
-    property int longDuration: currentDurations.long
+    readonly property int longDuration: (typeof SettingsData !== "undefined" && SettingsData.animationSpeed === SettingsData.AnimationSpeed.Custom) ? SettingsData.customAnimationDuration : currentDurations.long
-    property int extraLongDuration: currentDurations.extraLong
+    readonly property int extraLongDuration: (typeof SettingsData !== "undefined" && SettingsData.animationSpeed === SettingsData.AnimationSpeed.Custom) ? SettingsData.customAnimationDuration : currentDurations.extraLong
-    property int standardEasing: Easing.OutCubic
+    readonly property int standardEasing: Easing.OutCubic
-    property int emphasizedEasing: Easing.OutQuart
+    readonly property int emphasizedEasing: Easing.OutQuart
 
     readonly property var expressiveCurves: {
         "emphasized": [0.05, 0, 2 / 15, 0.06, 1 / 6, 0.4, 5 / 24, 0.82, 0.25, 1, 1, 1],

quickshell/Modules/Notifications/Center/HistoryNotificationCard.qml

@@ -11,6 +11,11 @@ Rectangle {
     property bool isSelected: false
     property bool keyboardNavigationActive: false
     property bool descriptionExpanded: NotificationService.expandedMessages[historyItem?.id ? (historyItem.id + "_hist") : ""] || false
+    property bool __initialized: false
+
+    Component.onCompleted: {
+        Qt.callLater(() => { __initialized = true; });
+    }
 
     readonly property bool compactMode: SettingsData.notificationCompactMode
     readonly property real cardPadding: compactMode ? Theme.spacingS : Theme.spacingM
@@ -45,8 +50,9 @@ Rectangle {
     }
 
     Behavior on border.color {
+        enabled: root.__initialized
         ColorAnimation {
-            duration: Theme.shortDuration
+            duration: root.__initialized ? Theme.shortDuration : 0
             easing.type: Theme.standardEasing
         }
     }

quickshell/Modules/Notifications/Center/HistoryNotificationList.qml

@@ -253,6 +253,11 @@ Item {
                 property real swipeOffset: 0
                 property bool isDismissing: false
                 readonly property real dismissThreshold: width * 0.35
+                property bool __delegateInitialized: false
+
+                Component.onCompleted: {
+                    Qt.callLater(() => { __delegateInitialized = true; });
+                }
 
                 width: ListView.view.width
                 height: historyCard.height
@@ -268,7 +273,7 @@ Item {
                     opacity: 1 - Math.abs(delegateRoot.swipeOffset) / (delegateRoot.width * 0.5)
 
                     Behavior on x {
-                        enabled: !swipeDragHandler.active
+                        enabled: !swipeDragHandler.active && delegateRoot.__delegateInitialized
                         NumberAnimation {
                             duration: Theme.shortDuration
                             easing.type: Theme.standardEasing
@@ -276,8 +281,9 @@ Item {
                     }
 
                     Behavior on opacity {
+                        enabled: delegateRoot.__delegateInitialized
                         NumberAnimation {
-                            duration: Theme.shortDuration
+                            duration: delegateRoot.__delegateInitialized ? Theme.shortDuration : 0
                         }
                     }
                 }

quickshell/Modules/Notifications/Center/KeyboardNavigatedNotificationList.qml

@@ -13,6 +13,11 @@ DankListView {
     property alias count: listView.count
     property alias listContentHeight: listView.contentHeight
     property bool cardAnimateExpansion: true
+    property bool listInitialized: false
+
+    Component.onCompleted: {
+        Qt.callLater(() => { listInitialized = true; });
+    }
 
     clip: true
     model: NotificationService.groupedNotifications
@@ -78,6 +83,11 @@ DankListView {
         property real swipeOffset: 0
         property bool isDismissing: false
         readonly property real dismissThreshold: width * 0.35
+        property bool __delegateInitialized: false
+
+        Component.onCompleted: {
+            Qt.callLater(() => { __delegateInitialized = true; });
+        }
 
         width: ListView.view.width
         height: isDismissing ? 0 : notificationCard.height
@@ -89,7 +99,7 @@ DankListView {
             x: delegateRoot.swipeOffset
             notificationGroup: modelData
             keyboardNavigationActive: listView.keyboardActive
-            animateExpansion: listView.cardAnimateExpansion
+            animateExpansion: listView.cardAnimateExpansion && listView.listInitialized
             opacity: 1 - Math.abs(delegateRoot.swipeOffset) / (delegateRoot.width * 0.5)
             onIsAnimatingChanged: {
                 if (isAnimating) {
@@ -126,7 +136,7 @@ DankListView {
             }
 
             Behavior on x {
-                enabled: !swipeDragHandler.active
+                enabled: !swipeDragHandler.active && listView.listInitialized
                 NumberAnimation {
                     duration: Theme.shortDuration
                     easing.type: Theme.standardEasing
@@ -134,8 +144,9 @@ DankListView {
             }
 
             Behavior on opacity {
+                enabled: listView.listInitialized
                 NumberAnimation {
-                    duration: Theme.shortDuration
+                    duration: listView.listInitialized ? Theme.shortDuration : 0
                 }
             }
         }

quickshell/Modules/Notifications/Center/NotificationCard.qml

@@ -31,10 +31,16 @@ Rectangle {
     width: parent ? parent.width : 400
     height: expanded ? (expandedContent.height + cardPadding * 2) : (baseCardHeight + collapsedContent.extraHeight)
     radius: Theme.cornerRadius
+    property bool __initialized: false
+
+    Component.onCompleted: {
+        Qt.callLater(() => { __initialized = true; });
+    }
 
     Behavior on border.color {
+        enabled: root.__initialized
         ColorAnimation {
-            duration: Theme.shortDuration
+            duration: root.__initialized ? Theme.shortDuration : 0
             easing.type: Theme.standardEasing
         }
     }
@@ -344,6 +350,11 @@ Rectangle {
                     readonly property real expandedIconSize: compactMode ? 40 : 48
                     readonly property real expandedItemPadding: compactMode ? Theme.spacingS : Theme.spacingM
                     readonly property real expandedBaseHeight: expandedItemPadding * 2 + expandedIconSize + actionButtonHeight + contentSpacing * 2
+                    property bool __delegateInitialized: false
+
+                    Component.onCompleted: {
+                        Qt.callLater(() => { __delegateInitialized = true; });
+                    }
 
                     width: parent.width
                     height: {
@@ -360,8 +371,9 @@ Rectangle {
                     border.width: 1
 
                     Behavior on border.color {
+                        enabled: __delegateInitialized
                         ColorAnimation {
-                            duration: Theme.shortDuration
+                            duration: __delegateInitialized ? Theme.shortDuration : 0
                             easing.type: Theme.standardEasing
                         }
                     }
@@ -719,7 +731,7 @@ Rectangle {
         enabled: root.userInitiatedExpansion && root.animateExpansion
         NumberAnimation {
             duration: Theme.mediumDuration
-            easing.type: Theme.emphasizedEasing
+            easing.type: root.expanded ? Theme.emphasizedEasing : Theme.standardEasing
             onRunningChanged: {
                 if (running) {
                     root.isAnimating = true;

quickshell/Modules/Notifications/Center/NotificationCenterPopout.qml

@@ -10,7 +10,6 @@ DankPopout {
 
     property bool notificationHistoryVisible: false
     property var triggerScreen: null
-    property bool _animatePopupHeight: false
 
     NotificationKeyboardController {
         id: keyboardController
@@ -24,14 +23,9 @@ DankPopout {
     popupWidth: 400
     popupHeight: contentLoader.item ? contentLoader.item.implicitHeight : 400
     positioning: ""
+    animationScaleCollapsed: 1.0
+    animationOffset: 0
 
-    Behavior on popupHeight {
-        enabled: root._animatePopupHeight
-        NumberAnimation {
-            duration: Math.min(Theme.shortDuration, 150)
-            easing.type: Theme.emphasizedEasing
-        }
-    }
     screen: triggerScreen
     shouldBeVisible: notificationHistoryVisible
 
@@ -81,13 +75,10 @@ DankPopout {
 
     onShouldBeVisibleChanged: {
         if (shouldBeVisible) {
-            _animatePopupHeight = false;
             NotificationService.onOverlayOpen();
             if (contentLoader.item)
                 Qt.callLater(setupKeyboardNavigation);
-            Qt.callLater(() => { root._animatePopupHeight = true; });
         } else {
-            _animatePopupHeight = false;
             NotificationService.onOverlayClose();
             keyboardController.keyboardNavigationActive = false;
         }
@@ -116,6 +107,7 @@ DankPopout {
 
             property var externalKeyboardController: null
             property real cachedHeaderHeight: 32
+            property bool notificationListAnimating: notificationList.isAnimatingExpansion
 
             implicitHeight: {
                 let baseHeight = Theme.spacingL * 2;
@@ -210,7 +202,7 @@ DankPopout {
                         visible: notificationHeader.currentTab === 0
                         width: parent.width
                         height: parent.height - notificationContent.cachedHeaderHeight - notificationSettings.height - contentColumnInner.spacing * 2
-                        cardAnimateExpansion: false
+                        cardAnimateExpansion: true
                     }
 
                     HistoryNotificationList {