CrossFadeTextAnimation

import QtQuick 2.12
import QtQuick.Window 2.12
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Rectangle {
        id: root
        anchors.fill: parent
        color: "#181C21"
        property var texts: ["First Text", "Second Text", "Third Text", "Fourth Text", "Fifth Text"]
        property int index: 0
        Text {
            id: text1
            anchors.fill: parent
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            font.pixelSize: 30
            color: "white"
            text: root.texts[0]
        }
        Text {
            id: text2
            anchors.fill: parent
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            font.pixelSize: 30
            color: "white"
            text: root.texts[1]
            opacity: 0.0
        }
        ParallelAnimation {
            id: text1ToText2
            running: false
            PropertyAnimation { target: text1; property: "opacity"; to: 0.0; duration: 1000;}
            PropertyAnimation { target: text2; property: "opacity"; to: 1.0; duration: 1000 }
        }
        ParallelAnimation {
            id: text2ToText1
            running: false
            PropertyAnimation { target: text2; property: "opacity"; to: 0.0; duration: 1000;}
            PropertyAnimation { target: text1; property: "opacity"; to: 1.0; duration: 1000 }
        }
        MouseArea {
            anchors.fill: parent
            onClicked: {
                root.index = (root.index + 1) % root.texts.length
                if(text1.opacity == 0.0) {
                    text1.text = root.texts[root.index]
                    text2ToText1.start()
                } else {
                    text2.text = root.texts[root.index]
                    text1ToText2.start()
                }
            }
        }
    }
}