Text Tween Animation

TextTweern.kt

val colors = listOf(
    Color(0xFFF3C623),
    Color(0xFFF2AAAA),
    Color(0xFFF37121),
    Color(0xFFF2AAAA),
    Color(0xFF8FC0A9),
    Color(0xFF84A9AC),
    Color(0xFFD54062),
    Color(0xFF8FC0A9)
)

@Composable
fun AnimatedTextWithSlider() {
    val text = "WEEKEND"
    val infiniteTransition = rememberInfiniteTransition(label = "")
    var rotationValue by remember { mutableFloatStateOf(0f) }
    var scaleValue by remember { mutableFloatStateOf(1f) }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Black),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .weight(1f),
            contentAlignment = Alignment.Center
        ) {
            Row(
                horizontalArrangement = Arrangement.Center,
                verticalAlignment = Alignment.CenterVertically
            ) {
                text.forEachIndexed { index, char ->
                    val delay = index * 25
                    val yOffset by infiniteTransition.animateFloat(
                        initialValue = 100f,
                        targetValue = -100f,
                        animationSpec = infiniteRepeatable(
                            animation = tween(
                                durationMillis = 2000,
                                easing = LinearOutSlowInEasing,
                                delayMillis = delay
                            ),
                            repeatMode = RepeatMode.Reverse
                        ), label = ""
                    )


                    val color by infiniteTransition.animateColor(
                        initialValue = colors[index % colors.size],
                        targetValue = colors[(index + 4) % colors.size],
                        animationSpec = infiniteRepeatable(
                            animation = tween(
                                durationMillis = 2000,
                                easing = LinearOutSlowInEasing,
                                delayMillis = delay
                            ),
                            repeatMode = RepeatMode.Reverse
                        ), label = ""
                    )

                    val alpha by infiniteTransition.animateFloat(
                        initialValue = 1f,
                        targetValue = 0f,
                        animationSpec = infiniteRepeatable(
                            animation = tween(
                                durationMillis = 2000,
                                easing = LinearOutSlowInEasing,
                                delayMillis = delay
                            ),
                            repeatMode = RepeatMode.Reverse
                        ), label = ""
                    )

                    Box(
                        contentAlignment = Alignment.Center
                    ) {

                        Text(
                            text = char.toString(),
                            fontSize = 100.sp,
                            fontWeight = FontWeight.Bold,
                            fontFamily = FontFamily.Monospace,
                            color = color.copy(alpha = alpha),
                            textAlign = TextAlign.Center,
                            modifier = Modifier
                                .graphicsLayer {
                                    translationY = yOffset * 2
                                    rotationZ = rotationValue * 360
                                    scaleX = scaleValue
                                    scaleY = scaleValue
                                }
                        )

                        Text(
                            text = char.toString(),
                            fontSize = 100.sp,
                            fontWeight = FontWeight.Bold,
                            fontFamily = FontFamily.Monospace,
                            color = Color.White,
                            textAlign = TextAlign.Center,
                            modifier = Modifier
                                .graphicsLayer {
                                    translationY = yOffset
                                    translationX = 5.dp.toPx()
                                    rotationZ = rotationValue * 360
                                    scaleX = scaleValue
                                    scaleY = scaleValue
                                }
                        )
                    }
                }
            }
        }
        Text("Rotation", color = Color.White, modifier = Modifier.padding(8.dp))
        Slider(
            value = rotationValue,
            onValueChange = { rotationValue = it },
            valueRange = 0f..1f,
            modifier = Modifier.padding(horizontal = 16.dp)
        )

        Text("Scale", color = Color.White, modifier = Modifier.padding(8.dp))
        Slider(
            value = scaleValue,
            onValueChange = { scaleValue = it },
            valueRange = 0.5f..2f,
            modifier = Modifier.padding(horizontal = 16.dp, vertical = 30.dp)
        )
    }
}