ParallelAnimation with multiple items

grego

I'd like to animate two distinct objects in parallel, but I'm unsure what's the best way to go about it.

I tried something like below

// ball is also an instance of Rectangle below, as is player.
@
function kick(ball) {
player.ball = ball
player.nX = player.x + 100
ball.nX = ball.x + 200
player.state = "moved"
}

Rectangle {
id: player
property int nX: 0
property int nY: 0
property bool push: false
property variant ball // kicked ball

color: "red"

states: State {
    name: "moved";
    PropertyChanges { target: ball; x: nX; y: nY; restoreEntryValues: false }
}

transitions: Transition {
    from: ""; to: "moved";
    ParallelAnimation {
        NumberAnimation { properties: "x,y"; duration: 200; easing.type: Easing.InOutQuad}
        NumberAnimation { target: ball; property: "x"; to: ball.nX; duration: 200; easing.type: Easing.InOutQuad }
    }
}

}
@

And while both the player and ball moved, they did not move in parallel.
I'm tempted to just forget about ParallelAnimation and just roll my own, but is there a common idiom for this that I should follow?