Important: Please read the Qt Code of Conduct -

Animating expand and collapse of QML TreeView

  • Has anyone ever successfully discovered how to animate the expand and collapse of a TreeView in QML? The only information I can find on this is referenced in an old post which has no replies. (See below)

    Re: Animation When expanding and collapsing QML TreeView

    I'm currently using 5.5.1.

  • I have tried everything that I can think of.

    From the extreme basics... (Which does not work. )

            Behavior on height {
                NumberAnimation {
                    duration: 250
                    easing.type: Easing.InOutQuad

    To some more complex and "hacky" solutions... (See below)

    Looking at the TreeView implementation done by Gabriel de Dietrich and Caroline Chao (here), it seems that they perform an insert of the child data into the private "__listView" when the parent is expanded.

    After some research I was able to find information on view transitions and a few tips from a stackoverflow answer regarding animating new items in a table.

    Armed with these tips I was able to get a pretty crappy expand animation...

    TreeView {
        id: tree
        model: myModel
        Transition {
            id: treeTransitionAnimation
            NumberAnimation { properties: "y"; duration: 300 }
        Component.onCompleted: {
            if(this.__listView) {
                this.__listView.add  = treeTransitionAnimation
                this.__listView.remove  = treeTransitionAnimation
                //doesn't actually work on remove. The child items in the tree just disappear...
            else {
                console.log("Something bad happened. Darn.")

    This slides the new items in from the top of the tree when they are expanded (inserted)... but is not what I need. I have an animation in a flickable elsewhere in my applicaiton where the height of a child object in the flickable is animated to emulate "expanding".
    I need to match this style of animation.
    Substituting height into my transition animation simply causes it to fail.

    Any advice would be greatly appreciated!


    I was able to improve my expand animation, however the (almost) final answer to the question from Qt is that a collapse animation is not possible without editing the Qt source code directly (and maybe not even then...?). For many this is not a viable option and therefore not an answer.

    This problem will exist until after the new Qt Controls version is released and updated with a brand new implementation of TreeView
    FYI: That link states "It's way too late for 5.8" so I believe it's safe to assume this will come after 5.8.

    I am in the process of discussing edits to the Qt source code with Qt support, but as an answer to the question as stated above, the answer is it cannot be done in current versions of Qt. (the current supported release at the time of this answer is 5.7)

Log in to reply