PathView should be quite good now

data/qml/CoverFlip.qml

@@ -26,10 +26,28 @@ PathView {
     pathItemCount: 5
     //highlightMoveDuration: 500
 
-    delegate: CoverImage {
+    property bool itemHovered: false
+
+    delegate: Item {
+        id: delegateItem
+        height: root.coverSize
+        width: root.coverSize
+
+        scale: PathView.itemScale
+//        itemBrightness: PathView.itemBrightness - ((coverView.itemHovered && !coverDelegate.containsMouse) ? .4 : 0)
+        property double itemBrightness: PathView.itemBrightness
+        property double itemOpacity: PathView.itemOpacity
+        z: coverView.width - x
+
+        CoverImage {
         id: coverDelegate
         height: root.coverSize
         width: root.coverSize
+        anchors {
+            top: parent.top
+            right: parent.right
+        }
+
         backgroundColor: coverView.backgroundColor
 
         showLabels: true
@@ -40,9 +58,9 @@ PathView {
         showPlayButton: true
         currentlyPlaying: isPlaying
 
-        scale: PathView.itemScale
+//        itemBrightness: PathView.itemBrightness - ((coverView.itemHovered && !coverDelegate.containsMouse) ? .4 : 0)
-        itemBrightness: PathView.itemBrightness
+        itemBrightness: coverDelegate.containsMouse ? 1 : parent.itemBrightness * (coverView.itemHovered ? .5 : 1)
-        opacity: PathView.itemOpacity
+        opacity: parent.itemOpacity
         z: coverView.width - x
 
         property int _origX
@@ -58,24 +76,25 @@ PathView {
             coverView.itemClicked(index)
         }
 
-        function newZ() {
-            return z;
-        }
-
         onContainsMouseChanged: {
             if (containsMouse) {
                 _origX = x;
                 _origY = y;
                 _origZ = z;
+                coverView.itemHovered = true
+            } else {
+                coverView.itemHovered = false
             }
         }
 
+
+    }
         states: [
             State {
-                name: "hovered"; when: coverDelegate.containsMouse && index !== currentIndex
+                name: "hovered"; when: coverDelegate.containsMouse && !coverView.moving && index !== currentIndex
                 PropertyChanges {
-                    target: coverDelegate
+                    target: delegateItem
-                    x: _origX + coverDelegate.width * coverDelegate.scale / 2
+                    width: root.coverSize * 2
                     z: _origZ
                 }
             }
@@ -83,14 +102,13 @@ PathView {
         transitions: [
             Transition {
                 NumberAnimation {
-                    properties: "x"
+                    properties: "width"
                     duration: 300
                     easing.type: Easing.InOutSine
                 }
 
             }
         ]
-
     }
 
     path: Path {

data/qml/CoverImage.qml

@@ -67,6 +67,7 @@ Item {
             Rectangle {
                 id: textBackground
                 anchors { left: parent.left; right: parent.right; bottom: parent.bottom }
+                anchors.margins: -1
                 height: (artistText.height + trackText.height) * 2
                 opacity: 1// showLabels ? 1 : 0
                 radius: 3
@@ -131,7 +132,25 @@ Item {
         anchors.rightMargin: -2
         anchors.topMargin: -2
 
-        opacity: 1 - itemBrightness + (mouseArea.containsMouse ? .2 : 0)
+        opacity: 1 - itemBrightness
+
+        Behavior on opacity {
+            NumberAnimation { easing.type: Easing.Linear; duration: 300 }
+        }
+    }
+
+    Rectangle {
+        id: itemGlow
+        color: "white"
+        anchors.fill: parent
+        anchors.bottomMargin: - parent.height
+
+        // scaling might be off a pixel... make sure that the shadow is at least as large as the image
+        anchors.leftMargin: -2
+        anchors.rightMargin: -2
+        anchors.topMargin: -2
+
+        opacity: mouseArea.containsMouse ? .2 : 0
 
         Behavior on opacity {
             NumberAnimation { easing.type: Easing.Linear; duration: 300 }