Qml Animation inside Rectangle not working

Question

There is a problem that first animation works and second does not. In the first case whole rectangle is animated, which is not desired, I need to animate just label, but adding animation to label did not bring any effect. Do you have any idea what is the issue why the second animation does not animate?

First:

import QtQuick 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.12
import QtQml.Models 2.12

Rectangle{
    property alias text: label.text
    clip: true
    NumberAnimation on x {
            id: animation
            from: 100.0
            to: -100.0
            duration: 500
            running: true//label.text.length > 25
            loops: Animation.Infinite
        }
    Label {
        anchors.fill : parent
        horizontalAlignment: Text.AlignHCenter;
        verticalAlignment: Text.AlignVCenter;
        id: label
    }
}

Second:

import QtQuick 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.12
import QtQml.Models 2.12

Rectangle{
    property alias text: label.text
    clip: true

    Label {
        anchors.fill : parent
        horizontalAlignment: Text.AlignHCenter;
        verticalAlignment: Text.AlignVCenter;
        id: label

        NumberAnimation on x {
            id: animation
            from: 100.0
            to: -100.0
            duration: 500
            running: true//label.text.length > 25
            loops: Animation.Infinite
        }

    }
}

Answer 1

I found two problem in your second animation.

1. Your Rectangle should have width and height or anchor.fill: parent

2. You should remove label anchor.fill: parent to allow changing of x

Checkout my code. It's working right now:

import QtQuick 2.12
import QtQuick.Controls 2.12

Rectangle{
    property alias text: label.text
    clip: true
    anchors.fill: parent


    Label {
        horizontalAlignment: Text.AlignHCenter;
        verticalAlignment: Text.AlignVCenter;
        id: label
        Text {
            id: name
            text: qsTr("text")
            color: "black"
        }

        NumberAnimation on x {
            id: animation
            from: 100.0
            to: -100.0
            duration: 500
            running: true//label.text.length > 25
            loops: Animation.Infinite
        }

    }
}