🎬 Seamless Entry and Exit Animations with AnimatedVisibility in Jetpack Compose

Learn how to animate your composables as they appear and disappear on screen using AnimatedVisibility, and create delightful, smooth UI transitions effortlessly.

🚀 Intro: Visibility That Feels Alive

Imagine this: You toggle a button, and instead of a card suddenly popping in, it slides up gracefully. Or when dismissed, it fades away softly — natural, fluid, and meaningful.

That’s where AnimatedVisibility shines — it’s the Compose-native way to animate enter and exit transitions of composables based on state.

And unlike older approaches (using View animations or TransitionManager), this one is:

• Declarative 🧩
• Lightweight ⚡
• Fully tied to Compose state management 💪

Today, we’ll build a real example — a “Show More Details” card that expands, fades, and shrinks with smooth motion.

🧠 Concept Overview: How AnimatedVisibility Works

The API is simple yet powerful:

AnimatedVisibility(visible = isVisible) {
    // Your composable content
}

When isVisible changes:

• Compose automatically triggers the enter and exit animations.
• You can customize those transitions with slide, expand, fade, or scale effects.

Let’s see it in action 👇

⚙️ Implementation: Building the Interactive Animated Card

🔹 Step 1: Basic Visibility Toggle

@Composable
fun AnimatedVisibilityDemo() {
    var isVisible by remember { mutableStateOf(false) }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(24.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Button(onClick = { isVisible = !isVisible }) {
            Text(if (isVisible) "Hide Details" else "Show Details")
        }

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

        AnimatedVisibility(visible = isVisible) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(180.dp)
                    .clip(RoundedCornerShape(16.dp))
                    .background(Color(0xFF7E57C2)),
                contentAlignment = Alignment.Center
            ) {
                Text(
                    "Compose makes animation easy!",
                    color = Color.White,
                    style = MaterialTheme.typography.titleMedium
                )
            }
        }
    }
}

✨ Tap the button — the card appears and disappears with default fade + expand animation.

🔹 Step 2: Custom Enter and Exit Animations

Default is nice, but let’s spice it up!

AnimatedVisibility(
    visible = isVisible,
    enter = fadeIn(animationSpec = tween(500)) +
            slideInVertically(initialOffsetY = { it }),
    exit = fadeOut(animationSpec = tween(400)) +
           slideOutVertically(targetOffsetY = { it / 2 })
) {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(180.dp)
            .clip(RoundedCornerShape(16.dp))
            .background(Color(0xFF26C6DA)),
        contentAlignment = Alignment.Center
    ) {
        Text(
            "Custom enter/exit animations!",
            color = Color.White,
            style = MaterialTheme.typography.titleMedium
        )
    }
}

🌀 Now the card:

• Slides in from below
• Fades out partially upward when hidden

This combo feels natural and gives a smooth contextual reveal.

🔹 Step 3: Combining Multiple Animated Elements

We can also animate multiple UI parts independently

@Composable
fun MultiElementAnimation() {
    var expanded by remember { mutableStateOf(false) }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(24.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Button(onClick = { expanded = !expanded }) {
            Text(if (expanded) "Collapse" else "Expand")
        }

        AnimatedVisibility(
            visible = expanded,
            enter = expandVertically() + fadeIn(),
            exit = shrinkVertically() + fadeOut()
        ) {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(Color(0xFF42A5F5))
                    .padding(16.dp)
                    .clip(RoundedCornerShape(12.dp))
            ) {
                Text("User Profile", color = Color.White, fontSize = 18.sp)
                Spacer(Modifier.height(8.dp))
                Text("Name: Nishanth", color = Color.White)
                Text("Level: Advanced", color = Color.White)
                Text("Status: Online", color = Color.White)
            }
        }
    }
}

💡 The column expands and collapses gracefully. No jarring pops — just fluid motion.

🧩 Step 4: Animating Child Composables Inside

Want even more control? Each element inside AnimatedVisibility can have its own animation using animateEnterExit.

AnimatedVisibility(
    visible = expanded,
    enter = fadeIn(),
    exit = fadeOut()
) {
    Row(
        verticalAlignment = Alignment.CenterVertically
    ) {
        Icon(
            imageVector = Icons.Default.Favorite,
            contentDescription = null,
            modifier = Modifier
                .animateEnterExit(
                    enter = slideInHorizontally(initialOffsetX = { -40 }),
                    exit = slideOutHorizontally(targetOffsetX = { 40 })
                )
                .padding(8.dp)
        )
        Text("Liked!", color = Color.White)
    }
}

🎯 Each child reacts differently — giving your animation storytelling depth.

🧠 Pro Tip: Performance & Best Practices

✅ Use AnimatedVisibility for state-driven UI, not frequent recompositions ✅ Keep animations short (300–600ms) for UX comfort ✅ Use AnimatedContent for content replacement (next-level topic soon!) ✅ Remember: animations recompose efficiently, so no performance worry

🧪 Interactive Challenge

Try this yourself:

1. Add expandHorizontally() + fadeIn() together
2. Add an AnimatedVisibility around a LazyColumn
3. Chain LaunchedEffect to start animation after 2 seconds
4. Play with different animationSpec types (spring, tween, keyframes)

💡 Every experiment shows how Compose builds motion declaratively.

🧩 Takeaway

AnimatedVisibility transforms how you handle dynamic layouts — turning conditional rendering into beautiful motion.

“Visibility is not just a state — it’s an experience.”

Mastering it gives you the confidence to craft UIs that breathe with state changes.

Before you leave — -

• 💬 I’d love to hear from you! What topics would you like me to write about next? Let’s learn and grow together! 🌱
• Follow me for more update on Andorid/kotlin and latest Tech
• Give me a 👏 Clap to put it one step up for others readers
• Connect Me on on LinkedIn!

Thanks for the read!.

[embed]Nishanth Selvaraju - Medium Read writing from Nishanth Selvaraju on Medium. Android iOS Cross-Platform AI DevOps | 10+ Years in Mobilemedium.com