Animation of PathView delegate

[Mark81]

I have this PathView object:

PathView {
    id: view
    property int item_gap: 60

    anchors.fill: parent
    pathItemCount: 3
    preferredHighlightBegin: 0.5
    preferredHighlightEnd: 0.5
    highlightRangeMode: PathView.StrictlyEnforceRange
    highlightMoveDuration: 1000
    snapMode: PathView.SnapToItem
    rotation: -90

    model: modelContent
    delegate: DelegateContent { }

    path: Path {
        startX: view.width + item_gap; startY: view.height / 2
        PathAttribute { name: "iconScale"; value: 0.7 }
        PathAttribute { name: "iconOpacity"; value: 0.1 }
        PathAttribute { name: "iconOrder"; value: 0 }
        PathLine {x: view.width / 2; y: view.height / 2; }
        PathAttribute { name: "iconScale"; value: 1 }
        PathAttribute { name: "iconOpacity"; value: 1 }
        PathAttribute { name: "iconOrder"; value: 9 }
        PathLine {x: -item_gap; y: view.height / 2; }
    }
}

and here its delegate:

Component {
    Item {
        id: root

        property int highlightMoveDuration: 1000
        property int image_width: 864 * 0.8

        required property int index
        required property string label
        required property string thumbnail

        width: image_width; height: width * 1.7778
        scale: PathView.iconScale
        opacity: PathView.iconOpacity
        z: PathView.iconOrder

        Image {
            id: img
            width: parent.width
            height: parent.height
            cache: true
            asynchronous: true
            source: "file://" + thumbnail
            sourceSize: Qt.size(parent.width, parent.height)
            visible: false
            }

            // other non-relevant stuff
        }
    }
}

When I receive a signal from C++ I need to animate the current item in the following way:

1. fade it and all the other items to transparent
2. in the meantime the current item only has to move up along Y axis
3. call a C++ function
4. reposition the item at the original position (it's still transparent)
5. fade it and all the other items back to solid

I tried something like this:

SequentialAnimation {
    id: selectedContent
    running: false

    ParallelAnimation {
        PropertyAnimation { target: view; properties: "opacity"; duration: 500; to: 0.0}
        PropertyAnimation { target: view.delegate; properties: "y"; duration: 500; to: 0.0}
    }

    ScriptAction { script: flow.selectedContent(view.currentIndex) }

    ParallelAnimation {
        PropertyAnimation { target: view; properties: "opacity"; duration: 500; to: 1.0}
        PropertyAnimation { target: view.delegate; properties: "y"; duration: 0; to: view.height / 2}
    }
}

but the y properties of the delegate is not found:

QML PropertyAnimation: Cannot animate non-existent property "y"

Just to check the behavior I changed the target to view, but still there is no movements on the y axis.
Would you please help me to understand how to achieve such an animation?

[fcarney]

@Mark81 said in Animation of PathView delegate:

Component {
Item {
id: root

    property int highlightMoveDuration: 1000
    property int image_width: 864 * 0.8

    required property int index
    required property string label
    required property string thumbnail

    width: image_width; height: width * 1.7778
    scale: PathView.iconScale
    opacity: PathView.iconOpacity
    z: PathView.iconOrder

    Image {
        id: img
        width: parent.width
        height: parent.height
        cache: true
        asynchronous: true
        source: "file://" + thumbnail
        sourceSize: Qt.size(parent.width, parent.height)
        visible: false
        }

        // other non-relevant stuff
    }
}

}

If this is DelegateContent it should be:

    Item {
        id: root

        property int highlightMoveDuration: 1000
        property int image_width: 864 * 0.8

        required property int index
        required property string label
        required property string thumbnail

        width: image_width; height: width * 1.7778
        scale: PathView.iconScale
        opacity: PathView.iconOpacity
        z: PathView.iconOrder

        Image {
            id: img
            width: parent.width
            height: parent.height
            cache: true
            asynchronous: true
            source: "file://" + thumbnail
            sourceSize: Qt.size(parent.width, parent.height)
            visible: false
            }

            // other non-relevant stuff
        }
    }

You don't need Component when making it its own file.

Edit: Component is not an Item, so it doesn't have a y property.

[Mark81]

@fcarney I removed the Component but the error is the same:

QML PropertyAnimation: Cannot animate non-existent property "y"

But now the Item should have the y property, right?