Hi, I have an animation but I don't understand why the boxes are not spaced evenly in it. Please see...

# compose

[Nat Strangerweather]

Hi, I have an animation but I don't understand why the boxes are not spaced evenly in it. Please see gif and code in thread. Any ideas?

[Nat Strangerweather]

[Nat Strangerweather]

listOf(
            Color(0xffDFFF00),
            Color(0xffFFBF00),
            Color(0xffFF7F50),
            Color(0xffDE3163),
            Color(0xff9FE2BF),
            Color(0xff40E0D0),
            Color(0xff6495ED),
            Color(0xffCCCCFF),
        ).forEachIndexed { index, color ->
            val infiniteTransition = rememberInfiniteTransition()
            val positionState = infiniteTransition.animateFloat(
                initialValue = 0f,
                targetValue = 1f,
                animationSpec = infiniteRepeatable(
                    animation = tween(
                        durationMillis = 2500,
                        delayMillis = delay,
                        easing = LinearEasing
                    )
                )
            )
            delay += 1000

            val modifier = Modifier.offset(
                x = (maxWidth - tileSize),
                y = maxHeight - (maxHeight * positionState.value),
            )

           Box(
                modifier = modifier
                    .size(tileSize)
                    .clip(RoundedCornerShape(5.dp))
                    .background(color = color)
            ) {
                Text(
                    text = text,
                    Modifier.align(Alignment.Center),
                    style = TextStyle(fontWeight = FontWeight.Bold)
                )
            }

[Saiedmomen]

Their repeats overlap each other I think

[Nat Strangerweather]

Thanks, any idea how I can avoid that?

[Saiedmomen]

I would try with single animation and draw everything based on that. e.g with different offsets

[Nat Strangerweather]

Ah ok I see, makes sense, thanks!