Material3 Motion Guide — Container Transform/Shared Axis/Fade Through

What You'll Learn

Material3 Motion (container transform, shared axis transition, fade through, cross fade, Compose animation implementation) explained.

---

Material Motion Patterns

Pattern	Use Case
Container Transform	Card→detail screen
Shared Axis	Same-level step transitions
Fade Through	Unrelated screen switch
Fade	Show/hide

---

Container Transform (Shared Element)

@Composable
fun ContainerTransformExample() {
    SharedTransitionLayout {
        AnimatedContent(
            targetState = showDetail,
            transitionSpec = {
                fadeIn(tween(300)) togetherWith fadeOut(tween(300))
            }
        ) { isDetail ->
            if (!isDetail) {
                Card(
                    Modifier
                        .sharedBounds(
                            rememberSharedContentState(key = "card"),
                            animatedVisibilityScope = this@AnimatedContent,
                            resizeMode = SharedTransitionScope.ResizeMode.RemeasureToBounds
                        )
                        .size(100.dp)
                        .clickable { showDetail = true }
                ) { Text("Card") }
            } else {
                Surface(
                    Modifier
                        .sharedBounds(
                            rememberSharedContentState(key = "card"),
                            animatedVisibilityScope = this@AnimatedContent
                        )
                        .fillMaxSize()
                ) {
                    Column(Modifier.padding(16.dp)) {
                        Text("Detail Screen", style = MaterialTheme.typography.headlineMedium)
                        Button(onClick = { showDetail = false }) { Text("Back") }
                    }
                }
            }
        }
    }
}

---

Shared Axis (Shared Axis Transition)

@Composable
fun SharedAxisTransition(currentStep: Int) {
    AnimatedContent(
        targetState = currentStep,
        transitionSpec = {
            if (targetState > initialState) {
                (slideInHorizontally { it } + fadeIn()) togetherWith
                    (slideOutHorizontally { -it } + fadeOut())
            } else {
                (slideInHorizontally { -it } + fadeIn()) togetherWith
                    (slideOutHorizontally { it } + fadeOut())
            }.using(SizeTransform(clip = false))
        }
    ) { step ->
        when (step) {
            0 -> StepContent("Step 1: Basic Info")
            1 -> StepContent("Step 2: Details")
            2 -> StepContent("Step 3: Confirm")
        }
    }
}

---

Fade Through (Fade Through)

@Composable
fun FadeThroughTransition(selectedTab: Int) {
    AnimatedContent(
        targetState = selectedTab,
        transitionSpec = {
            fadeIn(tween(220, delayMillis = 90)) togetherWith
                fadeOut(tween(90))
        }
    ) { tab ->
        when (tab) {
            0 -> HomeContent()
            1 -> SearchContent()
            2 -> ProfileContent()
        }
    }
}

---

AnimatedVisibility (Show/Hide)

@Composable
fun FabWithAnimation(isVisible: Boolean, onClick: () -> Unit) {
    AnimatedVisibility(
        visible = isVisible,
        enter = scaleIn(
            initialScale = 0.6f,
            animationSpec = tween(220, easing = FastOutSlowInEasing)
        ) + fadeIn(tween(220)),
        exit = scaleOut(
            targetScale = 0.6f,
            animationSpec = tween(220)
        ) + fadeOut(tween(220))
    ) {
        FloatingActionButton(onClick = onClick) {
            Icon(Icons.Default.Add, "Add")
        }
    }
}

---

Summary

Pattern	Compose API
Container Transform	SharedTransitionLayout + sharedBounds
Shared Axis	AnimatedContent + slideIn/Out
Fade Through	AnimatedContent + fadeIn/Out
Fade	AnimatedVisibility

• Material Motion guideline-compliant animation
• SharedTransitionLayout for container transform
• AnimatedContent for content switch animation
• tween/spring for easing adjustment

---

Ready-Made Android App Templates

8 production-ready Android app templates with Jetpack Compose, MVVM, Hilt, and Material 3.

Browse templates → Gumroad