CodexBloom - Programming Q&A Platform

QML Animation not triggering when using Qt 6.5 with State Changes

๐Ÿ‘€ Views: 26 ๐Ÿ’ฌ Answers: 1 ๐Ÿ“… Created: 2025-07-02
qt qml animation

After trying multiple solutions online, I still can't figure this out... I am trying to animate a QML Rectangle using states, but the animation does not seem to trigger when the state changes. I have the following code for a simple state change that should modify the width of a Rectangle when I click a Button. However, the animation is not working as expected. Hereโ€™s the relevant part of my code: ```qml import QtQuick 2.15 import QtQuick.Controls 2.15 ApplicationWindow { visible: true width: 400 height: 300 Rectangle { id: animatedRect width: 100 height: 100 color: "blue" states: State { name: "expanded" PropertyChanges { target: animatedRect width: 200 } } transitions: Transition { NumberAnimation { duration: 500 easing: Easing.InOutQuad } } } Button { text: "Expand" onClicked: { animatedRect.state = (animatedRect.state === "expanded") ? "" : "expanded"; } } } ``` When I click the Button, the Rectangle does not animate its width to 200; it just jumps there without any transition. Iโ€™ve ensured that the `state` property is being toggled correctly, but still, thereโ€™s no animation occurring. I also tried explicitly defining the `State` and `Transition` in the Rectangle's context, yet it remains unresponsive to the state changes. I checked the documentation for QML animations and states, but I need to find anything that explicitly mentions additional requirements for animations to work with state changes. Any suggestions or insights on why the animation would not trigger would be greatly appreciated! I'm developing on Windows 11 with Qml.