Cascading Text Transition

TextTransition.kt

@Composable
fun TextTransition(textAndColor: Pair<String, Color>) {
    AnimatedContent(
        targetState = textAndColor,
        transitionSpec = {
            fadeIn() togetherWith fadeOut()
        }
    ) { (text, color) ->
        Row {
            text.forEachIndexed { index, char ->
                val stiffness = 300f - 200f * (index.toFloat() / (text.length - 1))
                Text(
                    modifier = Modifier.animateEnterExit(
                        enter = slideInVertically(spring(dampingRatio = 0.7f, stiffness = stiffness)) { -it },
                        exit = slideOutVertically { it }
                    ),
                    text = char.toString(),
                    style = MaterialTheme.typography.titleLarge,
                    fontWeight = FontWeight.Medium,
                    color = color
                )
            }
        }
    }
}