I'm trying to make an animated photo stack, but I'...

# compose

[Stefan Oltmann]

I'm trying to make an animated photo stack, but I'm not sure what the right approach is.

I want new images to animate in to lay down on a stack of like 3 (or 5) photos while the image at the bottom of the stack could be removed.

How would you do that?

[Stefan Oltmann]

This is what I got and it's buggy and only works half way:

@Composable
fun AnimatedPhotoStack(
    images: SnapshotStateList<ImageBitmap>
) {

    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {

        images.forEachIndexed { index, image ->

            val rotation = remember(image) { (-30..30).random().toFloat() }

            val scale = remember(image) { Animatable(2f) }

            // Animate properties when images list changes
            LaunchedEffect(image) {

                launch {
                    scale.animateTo(
                        targetValue = 0.5f,
                        animationSpec = tween(durationMillis = 2000)
                    )
                }
            }

            Image(
                bitmap = image,
                contentDescription = null,
                modifier = Modifier
                    .size(200.dp)
                    .rotate(rotation)
                    .graphicsLayer(
                        scaleX = scale.value,
                        scaleY = scale.value
                    )
                    .zIndex(index.toFloat())
            )
        }
    }
}