**bounciness**

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)
 	}
 }