# MutableTransitionState

Artifact: [androidx.compose.animation:animation-core](https://developer.android.com/jetpack/androidx/releases/compose-animation) [View Source](https://cs.android.com/search?q=file:androidx/compose/animation/core/Transition.kt+class:androidx.compose.animation.core.MutableTransitionState) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.0.0) Common/All
- Cmn

  ```
  class MutableTransitionState<S : Any?> : TransitionState<S>
  ```

|---|---|---|
| [kotlin.Any](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html) |||
| ↳ | [androidx.compose.animation.core.TransitionState](https://developer.android.com/reference/kotlin/androidx/compose/animation/core/TransitionState)\<S\> ||
|   | ↳ | [androidx.compose.animation.core.MutableTransitionState](https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState) |

*** ** * ** ***

MutableTransitionState contains two fields: `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState#currentState()` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState#targetState()`. `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState#currentState()` is initialized to the provided initialState, and can only be mutated by a `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Transition`. `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState#targetState()` is also initialized to initialState. It can be mutated to alter the course of a transition animation that is created with the `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState` using `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/rememberTransition.composable#rememberTransition(androidx.compose.animation.core.TransitionState,kotlin.String)`. Both `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState#currentState()` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState#targetState()` are backed by a `https://developer.android.com/reference/kotlin/androidx/compose/runtime/State` object.

```kotlin
import androidx.compose.animation.core.MutableTransitionState
import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.Transition
import androidx.compose.animation.core.animateDp
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.rememberTransition
import androidx.compose.animation.core.spring
import androidx.compose.animation.core.tween
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.material.Card
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.scale
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.unit.dp

// This composable enters the composition with a custom enter transition. This is achieved by
// defining a different initialState than the first target state using `MutableTransitionState`
@Composable
fun PoppingInCard() {
    // Creates a transition state with an initial state where visible = false
    val visibleState = remember { MutableTransitionState(false) }
    // Sets the target state of the transition state to true. As it's different than the initial
    // state, a transition from not visible to visible will be triggered.
    visibleState.targetState = true

    // Creates a transition with the transition state created above.
    val transition = rememberTransition(visibleState)
    // Adds a scale animation to the transition to scale the card up when transitioning in.
    val scale by
        transition.animateFloat(
            // Uses a custom spring for the transition.
            transitionSpec = { spring(dampingRatio = Spring.DampingRatioMediumBouncy) }
        ) { visible ->
            if (visible) 1f else 0.8f
        }
    // Adds an elevation animation that animates the dp value of the animation.
    val elevation by
        transition.animateDp(
            // Uses a tween animation
            transitionSpec = {
                // Uses different animations for when animating from visible to not visible, and
                // the other way around
                if (false isTransitioningTo true) {
                    tween(1000)
                } else {
                    spring()
                }
            }
        ) { visible ->
            if (visible) 10.dp else 0.dp
        }

    Card(
        Modifier.graphicsLayer(scaleX = scale, scaleY = scale)
            .size(200.dp, 100.dp)
            .fillMaxWidth(),
        elevation = elevation,
    ) {}
}
```

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/rememberTransition.composable#rememberTransition(androidx.compose.animation.core.TransitionState,kotlin.String)` |   |

## Summary

| ### Public constructors |
|---|---|
| `<S : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?> https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState#MutableTransitionState(kotlin.Any)(initialState: S)` | Cmn |

| ### Public properties |
|---|---|---|
| `open S` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState#currentState()` Current state of the transition. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState#isIdle()` `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState#isIdle()` returns whether the transition has finished running. | Cmn |
| `open S` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState#targetState()` Target state of the transition. | Cmn |

## Public constructors

### MutableTransitionState

Cmn

```
<S : Any?> MutableTransitionState(initialState: S)
```

## Public properties

### currentState

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.0.0)

```
open val currentState: S
```

Current state of the transition. `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState#currentState()` is initialized to the initialState that the `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState` is constructed with.

It will be updated by the Transition that is created with this `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState` when the transition arrives at a new state.

### isIdle

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.0.0)

```
val isIdle: Boolean
```

`https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState#isIdle()` returns whether the transition has finished running. This will return false once the `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState#targetState()` has been set to a different value than `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState#currentState()`.

```kotlin
import androidx.compose.animation.animateColor
import androidx.compose.animation.core.MutableTransitionState
import androidx.compose.animation.core.Transition
import androidx.compose.animation.core.animateDp
import androidx.compose.animation.core.rememberTransition
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun SelectableItem(selectedState: MutableTransitionState<Boolean>) {
    val transition = rememberTransition(selectedState)
    val cornerRadius by transition.animateDp { selected -> if (selected) 10.dp else 0.dp }
    val backgroundColor by transition.animateColor { selected ->
        if (selected) Color.Red else Color.White
    }
    Box(Modifier.background(backgroundColor, RoundedCornerShape(cornerRadius))) {
        // Item content goes here
    }
}

@Composable
fun ItemsSample(selectedId: Int) {
    Column {
        repeat(3) { id ->
            Box {
                // Initialize the selected state as false to produce a transition going from
                // false to true if `selected` parameter is true when entering composition.
                val selectedState = remember { MutableTransitionState(false) }
                // Mutate target state as needed.
                selectedState.targetState = id == selectedId
                // Now we pass the `MutableTransitionState` to the `Selectable` item and
                // observe state change.
                SelectableItem(selectedState)
                if (selectedState.isIdle && selectedState.targetState) {
                    // If isIdle == true, it means the transition has arrived at its target
                    // state
                    // and there is no pending animation.
                    // Now we can do something after the selection transition is
                    // finished:
                    Text("Nice choice")
                }
            }
        }
    }
}
```

### targetState

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.0.0)

```
open var targetState: S
```

Target state of the transition. `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState#targetState()` is initialized to the initialState that the `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState` is constructed with.

It can be updated to a new state at any time. When that happens, the `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Transition` that is created with this `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState` will update its `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Transition#targetState()` to the same and subsequently starts a transition animation to animate from the current values to the new target.