Slide In and Slide Out Animation QML

Automata

Hello all, please I have a challenge creating a slide out, slide in effect.

I have created a qml component in a separate qml file from my main qml file, with details of its interface, the state that triggers the transition and the transition.

In my main qml file I dynamically created the custom qml component to cover the screen, displaying information, and when new information becomes available, I create a new custom component dynamically, position it by the screen width to the left of the screen , and set the state of both components (the new and the existing component) that triggers their transition, to create an effect of the new component pushing out the old one and with the new now covering the screen. When new information becomes available again, I destroy the last component pushed out, and repeat the process.

The program just does not work, any help would be really appreciated. Thanks

Below is an idealization of what the custom component looks like

Rectangle {
    id: main
    width: parent.width
    height: parent.height
    color: "blue"

    property bool startSliding: false

    states: State {
        name: "slideOut"; when: main.startSliding
        PropertyChanges { target: main; x: (x + main.width); y: 0 }
    }

    transitions: Transition {
        to: "slideOut"
        NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad; duration: 400 }
   }

p3c0

@Automata Silly question probably, did you set main.startSliding to true ?

Automata

Solved now!
Happened I had to create 2 states and 2 transitions, yipee!

states: [
        State {
            name: "moveOut"; when: main.moveOut
            PropertyChanges { target: main; x: width; y: 0 }
        },
        State {
            name: "moveIn"; when: main.moveIn
            PropertyChanges { target: main; x: 0; y: 0 }
        }
    ]

    transitions: [
        Transition {
            to: "moveOut"
            NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad; duration: 400; loops: 1 }
        },
        Transition {
            to: "moveIn"
            NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad; duration: 400; loops: 1 }
        }
    ]

Aleksey_K

@Automata do You have full example please? Thanks!