A modern programming language that makes developers happier.

kotlinlang

A refinement of my move question earlier:

I have a row of 7 CardStack's each card stack is just a wrapper around a column.
What I want happen is for the composable(card) to animate between the column for undo moves.

My latest attempt involves a `LookaheadScope` However, it doesn't seem to do anything. Am I required to use `moveableContent` for this to work?

I thought (hoped) `animateBounds` would do the trick. Here's the code with the `LookaheadScope`.
```
  LookaheadScope {
    Row(
      modifier
        .fillMaxWidth()
        .padding(paddingValues),
      horizontalArrangement = Arrangement.SpaceBetween
    ) {
      tableau.forEachIndexed { i, stack -&gt;
        CardStack(
          onDropped = { suit, value, dropSource -&gt;
            viewModel.onDropped(suit, value, CardLocation.decode(dropSource), TableauLocation(i))
          },
        ) {
          if (stack.isEmpty()) {
            EmptyCard()
          }

          stack.forEach {
            PlayingCard(
              modifier = Modifier.animateBounds(this@LookaheadScope),
              model = it.toUiModel(),
              withShadow = true,
              disabled = isPaused,
              onDoubleClick = {
                viewModel.onDoubleClickCard(it, TableauLocation(i))
              },
              onGetDropSource = { TableauLocation(i) },
            )
          }
        }
      }
    }
  }```

`animateBounds` works *only if the composable remains in the same composition key / layout hierarchy* — that is, it only animates layout bounds *inside the same parent*. In your case, when a card is *moved from one column to another*, Compose sees it as a *removal* from one column and *insertion* into another → which *doesn't animate*, because it's not the same element.

val cards = remember {
    mutableMapOf&lt;Card, @Composable () -&gt; Unit&gt;()
}

LookaheadScope {
    Row(
        Modifier
            .fillMaxWidth()
            .padding(paddingValues),
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        tableau.forEachIndexed { i, stack -&gt;
            CardStack(
                onDropped = { suit, value, dropSource -&gt;
                    viewModel.onDropped(suit, value, CardLocation.decode(dropSource), TableauLocation(i))
                },
            ) {
                if (stack.isEmpty()) {
                    EmptyCard()
                }

                stack.forEach { card -&gt;
                    val content = cards.getOrPut(card) {
                        movableContentOf {
                            PlayingCard(
                                modifier = Modifier.animateBounds(this@LookaheadScope),
                                model = card.toUiModel(),
                                withShadow = true,
                                disabled = isPaused,
                                onDoubleClick = {
                                    viewModel.onDoubleClickCard(card, TableauLocation(i))
                                },
                                onGetDropSource = { TableauLocation(i) }
                            )
                        }
                    }
                    content()
                }
            }
        }
    }
}
use this code . do modify  to your code