I am experimenting with `LookaheadScope` to animat...

# compose

[Alex]

I am experimenting with LookaheadScope to animate a list order change, I have the following:

LookaheadScope {
    items.forEach { item ->
        key(item) {
            Text(
                modifier = Modifier
                    .animatePlacementInScope(this@LookaheadScope, item.name)
                    .defaultStartEndPadding()
                    .clickable { onReorder(items.shuffled()) }
                    .padding(vertical = 8.dp),
                text = item.name,
            )
        }
    }
}

So far so good, when I click any text, the items are shuffled and should reorder in an animated way (the animatePlacementInScope is lifted from the compose doc examples here)

The issues is, that the items will not reorder on the UI, EXCEPT for the case where one or more items Text composables SIZE changes. The size change seems to trigger a recomposition inside of the key and will cause the reordering animations (for all items) to run.

I cannot figure out how to make the animations run with only changing the ordering of the list, not the size of the Text composables.

It’s a really weird problem, what am I missing here?

[Rebecca Franks]

Have you tried using animateItemPlacement? I'm not sure I fully understand your use case and the direction of choosing lookahead, but Modifier.animateItemPlacement() should work for reorder animations on lazy items https://developer.android.com/jetpack/compose/lists#item-animations

[Doris Liu]

Looks like the sample code for animatePlacementInScope that you copied from missed a remember. Try replacing the offsetAnimation in the sample code with:

var offsetAnimation: Animatable<IntOffset, AnimationVector2D>? by remember {
        mutableStateOf(
            null
        )
    }