
In Jetpack Compose, InfiniteTransition is the easy way to run an animation forever. We can create its instance using rememberInfiniteTransition.
val transition = rememberInfiniteTransition()
The animations can be added with animateColor, animateFloat, or animateValue methods. Let’s look at animateFloat method:
@Composable
fun InfiniteTransition.animateFloat(
initialValue: Float,
targetValue: Float,
animationSpec: InfiniteRepeatableSpec<Float>
): State<Float>
initialValue – initial value of the animation
targetValue – final value of the animation
animationSpec – animation specification. You can use infiniteRepeatable.
Read Jetpack Compose Animatable to understand the basics of animations.
Here is an example of InfiniteTransition:
@Composable
fun MyUI() {
// to stop the animation
var animationRunning by remember {
mutableStateOf(true)
}
if (animationRunning) {
val transition = rememberInfiniteTransition()
val scale by transition.animateFloat(
initialValue = 1f,
targetValue = 1.5f,
animationSpec = infiniteRepeatable(
animation = tween(durationMillis = 1000),
repeatMode = RepeatMode.Reverse
)
)
// heart icon
Icon(
imageVector = Icons.Outlined.Favorite,
contentDescription = "Favorite",
tint = Color.Red,
modifier = Modifier
.scale(scale = scale)
.size(size = 64.dp)
)
}
// gap between the icon and the button
Spacer(modifier = Modifier.height(16.dp))
// stop button
Button(onClick = {
animationRunning = false
}) {
Text(text = "STOP")
}
}
Output:

Continue Exploring Jetpack Compose: