Anybody here know an efficient way to animate Lazy...

# compose

[Travis]

Anybody here know an efficient way to animate LazyRow's horizontalArrangement property?

I have something along the lines of

val animatedSpacingScale by transition.animateFloat(label = "scale") { state ->
  when(state) {
    LargeSpacing -> 10f
    NormalSpacing -> 1f
  }
}
LazyRow(
  horizontalArrangement = Arrangement.spacedBy(initialMargin * animatedSpacingScale),
) {
  items(viewModel.urls) {
    MyCustomImageWhatever(
      url = it,
      modifier = Modifier.height(90.dp)
          .aspectRatio(1f, matchHeightConstraintsFirst = true),
    )
  }
}

and it works, but it causes recomposition of the list at every animation step.

Is there a nice clean way to get this done without all that recomposition or am I fundamentally misunderstanding something?

[Chris Sinco [G]]

cc @Doris Liu

[Doris Liu]

The Arrangement.spacedBy in the snippet above is reading the animation value during composition, therefore when the animation value changes, recomposition will be triggered. As a rule of thumb, delaying the animation value read to a later stage will narrow down the scope of invalidation. I would recommend delaying reading the animation value till measurement time by creating a custom Arrangement:

LazyRow(
            horizontalArrangement = remember {
                object : Arrangement.Horizontal by Start {
                    override val spacing: Dp
                        get() = animatedSpacingScale * initialMargin
                }
            }
        ) {
           ...
        }