**bounciness**

Modules/Notifications/Sidebar/Utils/Wrapper.qml

@@ -20,69 +20,29 @@ Item {
 	required property Item sidebar
 	required property var visibilities
 
-	implicitHeight: 0
-	implicitWidth: sidebar.visible ? sidebar.width : Config.utilities.sizes.width
-	visible: height > 0
+	property real offsetScale: shouldBeActive ? 0 : 1
 
-	states: State {
-		name: "visible"
-		when: root.shouldBeActive
+	visible: offsetScale < 1
+	anchors.bottomMargin: (-implicitHeight - 5) * offsetScale
+	implicitHeight: content.implicitHeight + 8 * 2
+	implicitWidth: sidebar.width * (1 - sidebar.offsetScale)
+	opacity: 1 - offsetScale
 
-		PropertyChanges {
-			root.implicitHeight: content.implicitHeight + 8 * 2
-		}
-	}
-	transitions: [
-		Transition {
-			from: ""
-			to: "visible"
-
-			Anim {
-				duration: MaterialEasing.expressiveEffectsTime
-				easing.bezierCurve: MaterialEasing.expressiveEffects
-				property: "implicitHeight"
-				target: root
-			}
-		},
-		Transition {
-			from: "visible"
-			to: ""
-
-			Anim {
-				easing.bezierCurve: MaterialEasing.expressiveEffects
-				property: "implicitHeight"
-				target: root
-			}
-		}
-	]
-
-	onStateChanged: {
-		if (state === "visible" && timer.running) {
-			timer.triggered();
-			timer.stop();
-		}
-	}
-
-	Timer {
-		id: timer
-
-		interval: 1000
-		running: true
-
-		onTriggered: {
-			content.active = Qt.binding(() => root.shouldBeActive || root.visible);
-			content.visible = true;
+	Behavior on offsetScale {
+		Anim {
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
 		}
 	}
 
 	Loader {
 		id: content
 
-		active: true
 		anchors.left: parent.left
 		anchors.margins: 8
 		anchors.top: parent.top
-		visible: false
+
+		active: root.shouldBeActive || root.visible
 
 		sourceComponent: Content {
 			implicitWidth: root.implicitWidth - 8 * 2

Modules/Notifications/Sidebar/Wrapper.qml

@@ -12,57 +12,36 @@ Item {
 	}
 	required property var visibilities
 
-	implicitWidth: 0
-	visible: width > 0
+	readonly property bool shouldBeActive: root.visibilities.sidebar && Config.sidebar.enabled
+	property real offsetScale: shouldBeActive ? 0 : 1
 
-	states: State {
-		name: "visible"
-		when: root.visibilities.sidebar
+	visible: offsetScale < 1
+	anchors.rightMargin: (-implicitWidth - 5) * offsetScale
+	implicitWidth: Config.sidebar.sizes.width
+	opacity: 1 - offsetScale
 
-		PropertyChanges {
-			root.implicitWidth: Config.sidebar.sizes.width
+	Behavior on offsetScale {
+		Anim {
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
 		}
 	}
-	transitions: [
-		Transition {
-			from: ""
-			to: "visible"
-
-			Anim {
-				duration: MaterialEasing.expressiveEffectsTime
-				easing.bezierCurve: MaterialEasing.expressiveEffects
-				property: "implicitWidth"
-				target: root
-			}
-		},
-		Transition {
-			from: "visible"
-			to: ""
-
-			Anim {
-				easing.bezierCurve: MaterialEasing.expressiveEffects
-				property: "implicitWidth"
-				target: root
-			}
-		}
-	]
 
 	Loader {
 		id: content
 
-		active: true
 		anchors.bottom: parent.bottom
 		anchors.bottomMargin: 0
 		anchors.left: parent.left
 		anchors.margins: 8
 		anchors.top: parent.top
 
+		active: root.shouldBeActive || root.visible
+
 		sourceComponent: Content {
 			implicitWidth: Config.sidebar.sizes.width - 8 * 2
 			props: root.props
 			visibilities: root.visibilities
 		}
-
-		Component.onCompleted: active = Qt.binding(() => (root.visibilities.sidebar && Config.sidebar.enabled) || root.visible)
 	}
 }

Modules/Notifications/Wrapper.qml

@@ -22,8 +22,8 @@ Item {
 	}
 	transitions: Transition {
 		Anim {
-			duration: MaterialEasing.expressiveEffectsTime
-			easing.bezierCurve: MaterialEasing.expressiveEffects
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
 			property: "implicitHeight"
 			target: root
 		}