Visibility Animation in Jetpack Compose

Animations are essential in modern mobile applications as they enhance user experience by making the interface feel more responsive and engaging. Jetpack Compose offers a declarative way of building UI, and animations follow that same philosophy.

In this post, we'll explore Visibility Animations in Jetpack Compose and how you can use them to create smooth transitions between composables.

Why Use Visibility Animations?

Visibility animations allow you to animate changes in visibility states—showing or hiding UI elements gradually instead of abruptly. This smooth transition between states helps avoid sudden UI jumps and provides a more natural flow in your app.

For example:

👉You may want to show or hide a loading spinner based on whether a network request is in progress.

👉You may need to display extra details when a user expands a list item.

By animating these state changes, we create a polished user interface.

In Jetpack Compose, the core tool for animating visibility changes is the AnimatedVisibility composable. This function allows us to control whether a composable is visible or not and also lets us define how it appears or disappears from the screen. The most common animations for visibility are fade in, fade out, expand, and shrink.

AnimatedVisibility(
    visible = ,
    enter = ,
    exit = 
  )

• visible: This is the boolean state that controls whether the composable should be shown (true) or hidden (false).
• enter: Specifies the animation that plays when the composable becomes visible.
• exit: Specifies the animation that plays when the composable becomes invisible.

Types of Visibility Animations

1. Fade In / Fade Out: This makes composables gradually appear or disappear by adjusting their opacity.
2. Expand / Shrink: These transitions animate changes in size, creating a sense of "growing" into the view or "shrinking" out of it.
3. Custom Animations: You can combine multiple animations for more complex transitions, like fading in while expanding.

Example:

Copy this code →

package com.example.myapplication

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.expandIn
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.shrinkOut
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun VisibilityAnimation() {
    var isVisible by remember { mutableStateOf(true) }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // Combined animation for fade in + expand and fade out + shrink
        AnimatedVisibility(
            visible = isVisible,
            enter = fadeIn() + expandIn(),  // Fade in and expand
            exit = fadeOut() + shrinkOut()  // Fade out and shrink
        ) {
            Text(text = "I am animated with multiple effects!")
        }

        Spacer(modifier = Modifier.height(16.dp))

        Button(onClick = { isVisible = !isVisible }) {
            Text(if (isVisible) "Hide" else "Show")
        }
    }
}

OUTPUT: