<h2 id="createchildtransition-label-transformtochildstate">createChildTransition</h2>

<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](/jetpack-compose/androidx.compose.animation/animation-core/composable-functions/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](/jetpack-compose/androidx.compose.material3/material3/components/Label) is used to differentiate from other animations in the same transition in Android Studio.