# TransitionScope

Artifact: [androidx.constraintlayout:constraintlayout-compose](https://developer.android.com/jetpack/androidx/releases/constraintlayout) [View Source](https://cs.android.com/search?q=file:androidx/constraintlayout/compose/TransitionScope.kt+class:androidx.constraintlayout.compose.TransitionScope) Added in [1.1.2](https://developer.android.com/jetpack/androidx/releases/constraintlayout#1.1.2)


```
@ExperimentalMotionApi
@LayoutScopeMarker
class TransitionScope
```

<br />

*** ** * ** ***

Scope where `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Transition` parameters are defined.

Here, you may define multiple KeyFrames for specific `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstrainedLayoutReference`s, as well was enabling `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/OnSwipe` handling.

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/TransitionScope#keyAttributes(kotlin.Array,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/TransitionScope#keyPositions(kotlin.Array,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/TransitionScope#keyCycles(kotlin.Array,kotlin.Function1)` |   |

## Summary

| ### Public functions |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstrainedLayoutReference` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/TransitionScope#createRefFor(kotlin.Any)(id: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html)` Creates one `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstrainedLayoutReference` corresponding to the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayout.composable#ConstraintLayout(androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.animation.core.AnimationSpec,kotlin.Function0,kotlin.Function1)` element with `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/TransitionScope#createRefFor(kotlin.Any)`. |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/TransitionScope#keyAttributes(kotlin.Array,kotlin.Function1)( vararg targets: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstrainedLayoutReference, keyAttributesContent: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/KeyAttributesScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Define KeyAttribute KeyFrames for the given `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/TransitionScope#keyAttributes(kotlin.Array,kotlin.Function1)`. |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/TransitionScope#keyCycles(kotlin.Array,kotlin.Function1)( vararg targets: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstrainedLayoutReference, keyCyclesContent: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/KeyCyclesScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Define KeyCycle KeyFrames for the given `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/TransitionScope#keyCycles(kotlin.Array,kotlin.Function1)`. |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/TransitionScope#keyPositions(kotlin.Array,kotlin.Function1)( vararg targets: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstrainedLayoutReference, keyPositionsContent: https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/KeyPositionsScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Define KeyPosition KeyFrames for the given `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/TransitionScope#keyPositions(kotlin.Array,kotlin.Function1)`. |

| ### Public properties |
|---|---|
| `@https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = -1.0, to = 1.0, fromInclusive = false, toInclusive = false) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/TransitionScope#maxStaggerDelay()` Defines the maximum delay (in progress value) between a group of staggered widgets. |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Arc` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/TransitionScope#motionArc()` The default `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Arc` shape for animated layout movement. |
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/OnSwipe?` | `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/TransitionScope#onSwipe()` When not null, enables animating through the transition with touch input. |

## Public functions

### createRefFor

Added in [1.1.2](https://developer.android.com/jetpack/androidx/releases/constraintlayout#1.1.2)

```
fun createRefFor(id: Any): ConstrainedLayoutReference
```

Creates one `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstrainedLayoutReference` corresponding to the `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/ConstraintLayout.composable#ConstraintLayout(androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.animation.core.AnimationSpec,kotlin.Function0,kotlin.Function1)` element with `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/TransitionScope#createRefFor(kotlin.Any)`.

### keyAttributes

```
fun keyAttributes(
    vararg targets: ConstrainedLayoutReference,
    keyAttributesContent: KeyAttributesScope.() -> Unit
): Unit
```

Define KeyAttribute KeyFrames for the given `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/TransitionScope#keyAttributes(kotlin.Array,kotlin.Function1)`.

Set multiple KeyFrames with `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/KeyAttributesScope#frame(kotlin.Int,kotlin.Function1)`.

### keyCycles

```
fun keyCycles(
    vararg targets: ConstrainedLayoutReference,
    keyCyclesContent: KeyCyclesScope.() -> Unit
): Unit
```

Define KeyCycle KeyFrames for the given `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/TransitionScope#keyCycles(kotlin.Array,kotlin.Function1)`.

Set multiple KeyFrames with `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/KeyCyclesScope#frame(kotlin.Int,kotlin.Function1)`.

### keyPositions

```
fun keyPositions(
    vararg targets: ConstrainedLayoutReference,
    keyPositionsContent: KeyPositionsScope.() -> Unit
): Unit
```

Define KeyPosition KeyFrames for the given `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/TransitionScope#keyPositions(kotlin.Array,kotlin.Function1)`.

Set multiple KeyFrames with `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/KeyPositionsScope#frame(kotlin.Int,kotlin.Function1)`.

## Public properties

### maxStaggerDelay

Added in [1.1.2](https://developer.android.com/jetpack/androidx/releases/constraintlayout#1.1.2)

```
var maxStaggerDelay: @FloatRange(from = -1.0, to = 1.0, fromInclusive = false, toInclusive = false) Float
```

Defines the maximum delay (in progress value) between a group of staggered widgets.

The amount of delay for each widget is decided based on its weight. Where the widget with the lowest weight will receive the full delay. A negative `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/TransitionScope#maxStaggerDelay()` value inverts this logic, so that the widget with the highest weight will receive the full delay.

By default, the weight of each widget is calculated as the Manhattan Distance from the top-left corner of the layout. You may set custom weights using `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/MotionSceneScope#(androidx.constraintlayout.compose.ConstrainScope).staggeredWeight()` on a per-widget basis, this essentially allows you to set a custom staggering order. Note that when you set custom weights, widgets without a custom weight will be ignored for this calculation and will animate without delay.

The remaining widgets will receive a portion of this delay, based on their weight calculated against each other.

This is the formula to calculate the progress delay for a widget **i** , where **Max/MinWeight** is defined by the maximum and minimum calculated (or custom) weight:

```kotlin
progressDelay[i] = maxStaggerDelay * (1 - ((weight[i] - MinWeight) / (MaxWeight - MinWeight)))
```

To simplify, this is the formula normalized against **MinWeight**:

```kotlin
progressDelay[i] = maxStaggerDelay * (1 - weight[i] / MaxWeight)
```

Example:

Given three widgets with custom weights `[1, 2, 3]` and `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/TransitionScope#maxStaggerDelay()` = 0.7f.

- Widget0 will start animating at `progress == 0.7f` for having the lowest weight.

- Widget1 will start animating at `progress == 0.35f`

- Widget2 will start animating at `progress == 0.0f`

This is because the weights are distributed linearly among the widgets.

### motionArc

Added in [1.1.2](https://developer.android.com/jetpack/androidx/releases/constraintlayout#1.1.2)

```
var motionArc: Arc
```

The default `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Arc` shape for animated layout movement.

`https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/Arc#None()` by default.

### onSwipe

Added in [1.1.2](https://developer.android.com/jetpack/androidx/releases/constraintlayout#1.1.2)

```
var onSwipe: OnSwipe?
```

When not null, enables animating through the transition with touch input.

Example:

```kotlin
MotionLayout(
    motionScene = MotionScene {
        val textRef = createRefFor("text")
        defaultTransition(
            from = constraintSet {
                constrain(textRef) {
                    top.linkTo(parent.top)
                }
            },
            to = constraintSet {
                constrain(textRef) {
                    bottom.linkTo(parent.bottom)
                }
            }
        ) {
            onSwipe = OnSwipe(
                anchor = textRef,
                side = SwipeSide.Middle,
                direction = SwipeDirection.Down
            )
        }
    },
    progress = 0f, // OnSwipe handles the progress, so this should be constant to avoid conflict
    modifier = Modifier.fillMaxSize()
) {
    Text("Hello, World!", Modifier.layoutId("text"))
}
```

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/OnSwipe` |   |