---
title: "createChildTransition"
description: "[createChildTransition] creates a child Transition based on the mapping between parent state to
child state provided in [transformToChildState]. This serves the following purposes:
1) Hoist the child transition state into parent transition. Therefore the parent Transition will  be aware of whether there's any on-going animation due to the same target state change. This  will further allow sequential animation to be set up when all animations have finished.
2) Separation of concerns. The child transition can respresent a much more simplified state  transition when, for example, mapping from an enum parent state to a Boolean visible state for  passing further down the compose tree. The child composables hence can be designed around  handling a more simple and a more relevant state change.

[label] is used to differentiate from other animations in the same transition in Android Studio."
type: "composable"
---

<div class='type'>Composable Function</div>


<a id='references'></a>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@ExperimentalTransitionApi
@Composable
public inline fun <S, T> Transition<S>.createChildTransition(
    label: String = "ChildTransition",
    transformToChildState: @Composable (parentState: S) -> T,
): Transition<T>
```


`createChildTransition` creates a child Transition based on the mapping between parent state to
child state provided in `transformToChildState`. This serves the following purposes:
1) Hoist the child transition state into parent transition. Therefore the parent Transition will  be aware of whether there's any on-going animation due to the same target state change. This  will further allow sequential animation to be set up when all animations have finished.
2) Separation of concerns. The child transition can respresent a much more simplified state  transition when, for example, mapping from an enum parent state to a Boolean visible state for  passing further down the compose tree. The child composables hence can be designed around  handling a more simple and a more relevant state change.

`label` is used to differentiate from other animations in the same transition in Android Studio.




## Code Examples
### CreateChildTransitionSample
```kotlin
@Composable
@Suppress("UNUSED_PARAMETER")
fun CreateChildTransitionSample() {
    // enum class DialerState { DialerMinimized, NumberPad }
    @OptIn(ExperimentalTransitionApi::class)
    @Composable
    fun DialerButton(visibilityTransition: Transition<Boolean>, modifier: Modifier) {
        val scale by visibilityTransition.animateFloat { visible -> if (visible) 1f else 2f }
        Box(modifier.scale(scale).background(Color.Black)) {
            // Content goes here
        }
    }
    @Composable
    fun NumberPad(visibilityTransition: Transition<Boolean>) {
        // Create animations using the provided Transition for visibility change here...
    }
    @OptIn(ExperimentalTransitionApi::class)
    @Composable
    fun childTransitionSample() {
        var dialerState by remember { mutableStateOf(DialerState.NumberPad) }
        Box(Modifier.fillMaxSize()) {
            val parentTransition = updateTransition(dialerState)
            // Animate to different corner radius based on target state
            val cornerRadius by
                parentTransition.animateDp { if (it == DialerState.NumberPad) 0.dp else 20.dp }
            Box(
                Modifier.align(Alignment.BottomCenter)
                    .widthIn(50.dp)
                    .heightIn(50.dp)
                    .clip(RoundedCornerShape(cornerRadius))
            ) {
                NumberPad(
                    // Creates a child transition that derives its target state from the parent
                    // transition, and the mapping from parent state to child state.
                    // This will allow:
                    // 1) Parent transition to account for additional animations in the child
                    // Transitions before it considers itself finished. This is useful when you
                    // have a subsequent action after all animations triggered by a state change
                    // have finished.
                    // 2) Separation of concerns. This allows the child composable (i.e.
                    // NumberPad) to only care about its own visibility, rather than knowing about
                    // DialerState.
                    visibilityTransition =
                        parentTransition.createChildTransition {
                            // This is the lambda that defines how the parent target state maps to
                            // child target state.
                            it == DialerState.NumberPad
                        }
                    // Note: If it's not important for the animations within the child composable to
                    // be observable, it's perfectly valid to not hoist the animations through
                    // a Transition object and instead use animate*AsState.
                )
                DialerButton(
                    visibilityTransition =
                        parentTransition.createChildTransition {
                            it == DialerState.DialerMinimized
                        },
                    modifier = Modifier.matchParentSize(),
                )
            }
        }
    }
}
```