<div dir="ltr"><div><div><div>Hi,<br><br></div>I am unable to figure out how to add an animation for the delegate item's x position. My interest is not regarding (add|move|remove)(Displaced) nor populate. I am talking about the view's "internal" re-layouting when e.g. the cell size changes. For an illustration please see:<br><br><span style="font-family:monospace,monospace">Rectangle {<br>    width: 200<br>    height: 250<br><br>    Slider {<br>        id: slider<br>        minimumValue: 50<br>        maximumValue: 120<br>        value: 50<br>        anchors {<br>            top: parent.top<br>            left: parent.left<br>            right: parent.right<br>        }<br>    }<br><br>    GridView {<br>        id: grid<br>        clip: true<br>        anchors {<br>            top: slider.bottom<br>            left: parent.left<br>            right: parent.right<br>            bottom: parent.bottom<br>        }<br>        cellWidth: slider.value<br>        cellHeight: slider.value<br><br>        model: ListModel {<br>            id: model<br>            ListElement {text: "1"}<br>            ListElement {text: "2"}<br>            ListElement {text: "3"}<br>            ListElement {text: "4"}<br>            ListElement {text: "5"}<br>            ListElement {text: "6"}<br>            ListElement {text: "7"}<br>            ListElement {text: "8"}<br>            ListElement {text: "9"}<br>        }<br><br>        delegate:<br>            Rectangle {<br>            id: delegate;<br>            height: grid.cellHeight<br>            width: grid.cellWidth<br>            Rectangle {<br>                width: parent.width - 10<br>                height: parent.height - 10<br>                anchors.centerIn: parent<br>                border {width: 1; color: "#666666"}<br>                color: index == grid.currentIndex ? "#00e400" : "#f7f7f7"<br>                Text {text: text; anchors.centerIn: parent}<br>                MouseArea {<br>                    anchors.fill: parent<br>                    onClicked: {<br>                        grid.currentIndex = index<br>                    }<br>                }<br>                Behavior on color {<br>                    ColorAnimation { duration: 500 }<br>                }<br>                Behavior on width {<br>                    NumberAnimation { duration: 500 }<br>                }<br>                Behavior on x {<br>                    NumberAnimation { duration: 500 }<br>                }<br>            }<br>        }<br>    }<br>}</span><br><br></div>Move the slider: While the Behavior on color and width works, a Behavior on x fails. With increasing size, the items on the edge just jumps to the next row's beginning. How can I animate such a jump?<br><br></div><div>Thanks for your help!<br></div><div><br></div></div>