Important: Please read the Qt Code of Conduct -

Animation - 'to' property defaults to 0 unless hard-coded

  • Hi, here's my code:

    import QtQuick 2.5
    import QtQuick.Window 2.0
    import QtQuick.Controls 2.0
    Window {
        visible: true
        width: 640
        height: 480
        property int rectHeight: idFlow.height / 2
        property int rectWidth: idFlow.width / 3
        property int animDurationMs: 4000
        property double baseColor1: Math.random()
        property double baseColor2: Math.random()
        property double baseColor3: Math.random()
    Flow {
            id: idFlow
            height: parent.height
            width: parent.width
            flow: Flow.LeftToRight
            Rectangle {
                id: idColorRect
                radius: 8
                height: 50  //SHOULD BE 0 but setting >0 proves the animation is working
                width: rectWidth
                gradient: Gradient { // This sets a vertical gradient fill
                    GradientStop { position: 0.0; color: Qt.rgba(baseColor1, baseColor2, baseColor3, 0.4) }
                    GradientStop { position: 1.0; color: Qt.rgba(baseColor1, baseColor2, baseColor3, 1.0) }
                border { width: 3; color: "white" }
                PropertyAnimation on height { //I have also tried NumberAnimation
                    duration : animDurationMs
                    from: 40
                    to : rectHeight // SHOULD BE rectHeight but it's defaulting to 0 unless I hard-code it, the dynamic value in this case should be 240
                    easing.type: Easing.InCurve
                MouseArea {
                    anchors.fill: parent
                    onClicked: { console.log("rectHeight: " + rectHeight) } // proves rectHeight is being set to 240

    It doesn't seem to matter how I assign to the 'to' property in the PropertyAnimation, it defaults itself to 0. I have also tried this with NumberAnimation. The 'to' property isn't updating.

    On run, click on the rectangle & the rectHeight value is output to the console - you can see that it is being assigned a non-zero value. However it appears that the only way I can get the 'to' property to have a non-zero value is by hard-coding it (i.e. to: 240). But I need it to be dynamically set. I have seen other examples of people assigning a dynamic value to the 'to' property, but for some reason mine won't work.

    Can anyone try this code out or tell me what it is that is stopping the dynamic allocation of a value to 'to' from working?

    UPDATE: I have copied the code into a separate example project and it is working. So is there a reason it would not work in my project? Am I missing a setting or something?

    Many thanks in advance.

  • Moderators

    @oblong I just tried your example which doesn't work. It seems you are complicating the code.
    See you are animating the Rectangle which is inside the Flow and rectHeight depends on Flow's height which in turn depends on the root component i.e Window. So why not just pass Window's height directly ? Something like

    Window {
        id: root
        PropertyAnimation on height { //I have also tried NumberAnimation
        duration : animDurationMs
        from: 40
        to : root.height/2
        easing.type: Easing.InCurve

    This works for me.

Log in to reply