I’m working on developing a screen where, when scrolling some cards, they should stack at the top. I’m almost there, but I’m facing an issue: when the cards reach the end of the screen, they almost stack and then disappear. What I need is for them to remain stacked.

Can anyone help me identify what’s wrong with my code?

Here’s my code:

@Composable
fun CardView(color: Color) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .height(500.dp),
        shape = RoundedCornerShape(15.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 5.dp),
        colors = CardDefaults.cardColors(
            containerColor = Color.Blue
        )
    ) {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(color)
        )
    }
}

@Composable
fun HomeView() {
    val scrollState = rememberScrollState()
    val color = listOf(
        Color.Blue,
        Color.Red,
        Color.Gray,
        Color.Green
    )
    Column(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(scrollState)
            .padding(top = 50.dp)
    ) {
        repeat(4) { index ->
            var cardY by remember { mutableStateOf(0f) }
            var cardHeight by remember { mutableStateOf(0f) }

            Box(
                modifier = Modifier
                    .offset(y = (-15).dp)
                    .onGloballyPositioned { coordinates ->
                        cardY = coordinates.positionInWindow().y
                        cardHeight = coordinates.size.height.toFloat()
                    }
                    .graphicsLayer {
                        val minY = if (cardY < 0) -cardY else 0f

                        val maximumYaxis = cardY + cardHeight
                        val height = 200f
                        val progressCard = if (minY == 0f) {
                            0f
                        } else {
                            (1f - (maximumYaxis / height)).coerceIn(0f, 1f)
                        }

                        val scaleValue = 1f - (progressCard * 0.1f)
                        scaleX = scaleValue
                        scaleY = scaleValue

                        translationY = minY + (-progressCard * 20f)

                    }
            ) {
                CardView(color[index])
            }
        }
    }
}

How I want it to work. iOS example: