I want to have a collections of Cards

data class Card(
    val content: String = "",
    var position: Int = -1,
    val xPosition: Int = position.div(4).toDouble().toInt(),
    val yPosition: Int = position.mod(4),
)

(think: buttons) on Screen (here 4×4 = 16) and the user can click them. I expect that the user clicks one card to select it. After clicking the second card the two selected cards should swap places (using an animation).

So far I am using transition to (try to) trigger the animation

var doAnimation by remember { mutableStateOf(false) }

val transition = updateTransition(
    targetState = doAnimation,
    label = null
)

My cards are ordered on screen via paddings and I keep track of the clicked cards through mutableListOfs

val posX = mutableListOf(Pair(-1, -1), Pair(-1, -1))
val posY = mutableListOf(Pair(-1, -1), Pair(-1, -1))
val cards = mutableListOf(Card(), Card())

The idea was now to set the position on the screen by transition.animateInt:

modifier = modifier.padding(
    start = transition.animateInt(
        transitionSpec = { tween(1000) },
        label = "",
        targetValueByState = { dot ->
            if (!dot || cards.none { it == card }) card.xPosition else posX.first { it.first == card.position }.second
        }
    ).value * (cardWidth + padding) + padding,

    top = transition.animateInt(
        transitionSpec = { tween(1000) },
        label = "",
        targetValueByState = { dot ->
            if (!dot || cards.none { it == card }) card.yPosition else posY.first { it.first == card.position }.second
        }
    ).value * (cardHeight + padding) + padding,
)

The onClick for each card is

posX[numberSelected] = Pair(card.position, card.xPosition)
posY[numberSelected] = Pair(card.position, card.yPosition)
cards[numberSelected] = card
numberSelected += 1
if (numberSelected == 2) {
    doAnimation = true
}

where

var numberSelected by remember { mutableIntStateOf(0) }

as I later wanted to generalize it to more permutations.

this however does not work. No animation is going on (maybe recomposition is not properly triggered or the values are overwritten somehow) I’ve also tried to use LaunchedEffect on doAnimation to set the position value of the cards but also this doesn’t work.

What can I do to get this to work? Any help would be greatly appreciated!