property animation that itself depends on an animated property don't work

Example:

export component Demo inherits Window {
    min-height: 300px;
    min-width: 300px;

    property <bool> val;
    property <int> p1: val ? 10 : 20;
    animate p1 { duration: 1s; }

    Rectangle {
        width: 5px;
        height: 5px;
        background: red;
        y: 0;
        x: p1 * 10px;
        animate x { duration: 0.1s; }
    }

    TouchArea {  clicked => {val = !val}  }

}

p1 is animated. But the animation on x only starts when the animation on p1 is totally finished. This is because the property is continuously marked as dirty and therefore the animation is continuously restarted and never makes any progress.

Another example is described in https://github.com/slint-ui/slint/discussions/4807 where a property depends on animation-tick

slint-ui / slint

property animation that itself depends on an animated property don't work #4811