add slidefade text animation to some stuff

.config/quickshell/ii/modules/background/Background.qml

@@ -241,6 +241,7 @@ Variants {
                     style: Text.Raised
                     styleColor: Appearance.colors.colShadow
                     text: DateTime.date
+                    animateChange: true
                 }
                 StyledText {
                     Layout.fillWidth: true

.config/quickshell/ii/modules/common/widgets/MaterialSymbol.qml

@@ -1,12 +1,11 @@
 import qs.modules.common
 import QtQuick
 
-Text {
+StyledText {
     id: root
     property real iconSize: Appearance?.font.pixelSize.small ?? 16
     property real fill: 0
     property real truncatedFill: Math.round(fill * 100) / 100 // Reduce memory consumption spikes from constant font remapping
-    renderType: Text.NativeRendering
     font {
         hintingPreference: Font.PreferFullHinting
         family: Appearance?.font.family.iconMaterial ?? "Material Symbols Rounded"
@@ -19,10 +18,8 @@ Text {
             "opsz": iconSize,
         }
     }
-    verticalAlignment: Text.AlignVCenter
-    color: Appearance.m3colors.m3onBackground
 
-    // Behavior on fill {
+    // Behavior on fill { // Leaky leaky, no good
     //     NumberAnimation {
     //         duration: Appearance?.animation.elementMoveFast.duration ?? 200
     //         easing.type: Appearance?.animation.elementMoveFast.type ?? Easing.BezierSpline

.config/quickshell/ii/modules/common/widgets/StyledText.qml

@@ -3,6 +3,11 @@ import QtQuick
 import QtQuick.Layouts
 
 Text {
+    id: root
+    property bool animateChange: false
+    property real animationDistanceX: 0
+    property real animationDistanceY: 6
+
     renderType: Text.NativeRendering
     verticalAlignment: Text.AlignVCenter
     font {
@@ -12,4 +17,73 @@ Text {
     }
     color: Appearance?.m3colors.m3onBackground ?? "black"
     linkColor: Appearance?.m3colors.m3primary
+
+    component Anim: NumberAnimation {
+        target: root
+        duration: 300 / 2
+        easing.type: Easing.BezierSpline
+        easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
+    }
+
+    Behavior on text {
+        id: textAnimationBehavior
+        property real originalX: root.x
+        property real originalY: root.y
+        enabled: root.animateChange
+
+        SequentialAnimation {
+            alwaysRunToEnd: true
+            ScriptAction {
+                script: textAnimationBehavior.originalX = root.x;
+            }
+            ScriptAction {
+                script: textAnimationBehavior.originalY = root.y;
+            }
+            ParallelAnimation {
+                Anim {
+                    property: "x"
+                    to: textAnimationBehavior.originalX - root.animationDistanceX
+                    easing.type: Easing.InSine
+                }
+                Anim {
+                    property: "y"
+                    to: textAnimationBehavior.originalY - root.animationDistanceY
+                    easing.type: Easing.InSine
+                }
+                Anim {
+                    property: "opacity"
+                    to: 0
+                    easing.type: Easing.InSine
+                }
+            }
+            PropertyAction {} // Tie the text update to this point (we don't want it to happen during the first slide+fade)
+            PropertyAction {
+                target: root
+                property: "x"
+                value: textAnimationBehavior.originalX + root.animationDistanceX
+            }
+            PropertyAction {
+                target: root
+                property: "y"
+                value: textAnimationBehavior.originalY + root.animationDistanceY
+            }
+            ParallelAnimation {
+                Anim {
+                    property: "x"
+                    to: textAnimationBehavior.originalX
+                    easing.type: Easing.OutSine
+                }
+                Anim {
+                    property: "y"
+                    to: textAnimationBehavior.originalY
+                    easing.type: Easing.OutSine
+                }
+                Anim {
+                    property: "opacity"
+                    to: 1
+                    easing.type: Easing.OutSine
+                }
+            }
+        }
+    }
 }

.config/quickshell/ii/modules/mediaControls/PlayerControl.qml

@@ -205,6 +205,9 @@ Item { // Player instance
                     color: blendedColors.colOnLayer0
                     elide: Text.ElideRight
                     text: StringUtils.cleanMusicTitle(playerController.player?.trackTitle) || "Untitled"
+                    animateChange: true
+                    animationDistanceX: 6
+                    animationDistanceY: 0
                 }
                 StyledText {
                     id: trackArtist
@@ -213,6 +216,9 @@ Item { // Player instance
                     color: blendedColors.colSubtext
                     elide: Text.ElideRight
                     text: playerController.player?.trackArtist
+                    animateChange: true
+                    animationDistanceX: 6
+                    animationDistanceY: 0
                 }
                 Item { Layout.fillHeight: true }
                 Item {

.config/quickshell/ii/modules/sidebarLeft/AiChat.qml

@@ -224,6 +224,7 @@ Inline w/ backslash and round brackets \\(e^{i\\pi} + 1 = 0\\)
                 font.pixelSize: Appearance.font.pixelSize.small
                 text: statusItem.statusText
                 color: Appearance.colors.colSubtext
+                animateChange: true
             }
         }
 

.config/quickshell/ii/modules/sidebarLeft/ApiInputBoxIndicator.qml

@@ -26,6 +26,7 @@ Item { // Model indicator
             color: Appearance.m3colors.m3onSurface
             elide: Text.ElideRight
             text: root.text
+            animateChange: true
         }
     }
 

.config/quickshell/ii/modules/sidebarRight/volumeMixer/AudioDeviceSelectorButton.qml

@@ -49,6 +49,7 @@ RippleButton {
                 font.pixelSize: Appearance.font.pixelSize.smaller
                 text: (input ? Pipewire.defaultAudioSource?.description : Pipewire.defaultAudioSink?.description) ?? Translation.tr("Unknown")
                 color: Appearance.m3colors.m3outline
+                animateChange: true
             }
         }
     }

.config/quickshell/ii/modules/verticalBar/BatteryIndicator.qml

@@ -46,6 +46,7 @@ MouseArea {
                     fill: 1
                     text: isCharging ? "bolt" : "battery_android_full"
                     iconSize: Appearance.font.pixelSize.normal
+                    animateChange: true
                 }
                 StyledText {
                     Layout.alignment: Qt.AlignHCenter