# SharedTransitionScope.SharedContentState

Artifact: [androidx.compose.animation:animation](https://developer.android.com/jetpack/androidx/releases/compose-animation) [View Source](https://cs.android.com/search?q=file:androidx/compose/animation/SharedTransitionScope.kt+class:androidx.compose.animation.SharedTransitionScope.SharedContentState) Added in [1.7.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.7.0) Common/AllAndroid/JVM
- Cmn

  ```
  class SharedTransitionScope.SharedContentState
  ```

*** ** * ** ***

`https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState` is designed to allow access of the properties of `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedBounds(androidx.compose.animation.SharedTransitionScope.SharedContentState,androidx.compose.animation.AnimatedVisibilityScope,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.ResizeMode,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)`/`https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedElement(androidx.compose.animation.SharedTransitionScope.SharedContentState,androidx.compose.animation.AnimatedVisibilityScope,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)`, such as whether a match of the same `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState#key()` has been found in the `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope`, its `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState#clipPathInOverlay()` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState#parentSharedContentState()` if there is a parent `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedBounds(androidx.compose.animation.SharedTransitionScope.SharedContentState,androidx.compose.animation.AnimatedVisibilityScope,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.ResizeMode,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)` in the layout tree.

## Summary

| ### Public functions |
|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState#prepareTransitionWithInitialVelocity(androidx.compose.ui.unit.Velocity)(initialVelocity: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Velocity)` `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState#prepareTransitionWithInitialVelocity(androidx.compose.ui.unit.Velocity)` sets up the initial velocity for the upcoming shared element transition. | Cmn |

| ### Public properties |
|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Path?` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState#clipPathInOverlay()` The resolved clip path in overlay based on the `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.OverlayClip` defined for the shared content. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState#isMatchFound()` Indicates whether a match of the same `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState#key()` has been found. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState#key()` | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState?` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState#parentSharedContentState()` Returns the `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState` of a parent `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedBounds(androidx.compose.animation.SharedTransitionScope.SharedContentState,androidx.compose.animation.AnimatedVisibilityScope,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.ResizeMode,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)`, if any. | Cmn |

## Public functions

### prepareTransitionWithInitialVelocity

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

```
fun prepareTransitionWithInitialVelocity(initialVelocity: Velocity): Unit
```

`https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState#prepareTransitionWithInitialVelocity(androidx.compose.ui.unit.Velocity)` sets up the initial velocity for the upcoming shared element transition. This function should be called during the gesture handling to allow the system to acquire the animation start time in the next (i.e. earliest) animation frame to ensure a smooth velocity handoff.

The velocity will used for both incoming and outgoing shared content defined with the same key once shared element transition starts. The animationSpec used to animate the momentum will be the same as what is used by the incoming shared element's bounds transform to keep consistent motion. If the incoming shared element uses a duration-based animation, a default spring will be used instead.

Note: This function will have no effect if the shared element is not enabled (i.e. `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentConfig#(androidx.compose.animation.SharedTransitionScope.SharedContentState).isEnabled()` is false). This velocity will only apply to the next shared element transition.

```kotlin
import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.SharedTransitionLayout
import androidx.compose.animation.SharedTransitionScope
import androidx.compose.animation.SharedTransitionScope.SharedContentState
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.togetherWith
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.gestures.draggable2D
import androidx.compose.foundation.gestures.rememberDraggable2DState
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.outlined.Create
import androidx.compose.material.icons.outlined.Share
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.round
import androidx.compose.ui.unit.sp

@Composable
fun Cat(modifier: Modifier = Modifier) {
    Image(
        painterResource(id = R.drawable.yt_profile),
        contentDescription = "cute cat",
        contentScale = ContentScale.FillHeight,
        modifier = modifier.clip(shape = RoundedCornerShape(10)),
    )
}

var showDetails by remember { mutableStateOf(true) }

// First, we need to create a SharedTransitionLayout, this Layout will provide the coordinator
// space for shared element position animation, as well as an overlay for shared elements to
// render in. Children content in this Layout will be able to create shared element transition
// using the receiver scope: SharedTransitionScope
SharedTransitionLayout(
    Modifier.clickable(remember { MutableInteractionSource() }, indication = null) {
            showDetails = !showDetails
        }
        .fillMaxSize()
        .padding(10.dp)
) {
    // In the SharedTransitionLayout, we will be able to access the receiver scope (i.e.
    // SharedTransitionScope) in order to create shared element transition.
    AnimatedContent(
        targetState = showDetails,
        transitionSpec = { fadeIn() togetherWith fadeOut() using null },
    ) { isDetails ->
        if (isDetails) {
            var offset by remember(transition.currentState) { mutableStateOf(Offset.Zero) }
            // Create a mutable state to hold the sharedContentState, so that we can invoke
            // prepareTransitionWithInitialVelocity on it in order to set up the initial
            // velocity in drag handler.
            var sharedContentStateForDraggableCat: SharedContentState? by remember {
                mutableStateOf(null)
            }
            Column(
                Modifier.fillMaxSize()
                    .draggable2D(
                        rememberDraggable2DState { offset += it },
                        onDragStopped = { velocity ->
                            // Set up the initial velocity for the upcoming shared element
                            // transition.
                            sharedContentStateForDraggableCat
                                ?.prepareTransitionWithInitialVelocity(velocity)
                            showDetails = false
                        },
                    )
            ) {
                Cat(
                    Modifier.fillMaxWidth()
                        .offset { offset.round() }
                        .aspectRatio(1f)
                        // Creating a shared element. Note that this modifier is *after*
                        // the size modifier and aspectRatio modifier, because those size specs
                        // are not shared between the two shared elements.
                        .sharedElement(
                            // Using the AnimatedVisibilityScope from the AnimatedContent
                            // defined above.
                            rememberSharedContentState("cat").also {
                                sharedContentStateForDraggableCat = it
                            },
                            this@AnimatedContent,
                        )
                )
            }
        } else {
            val colors = listOf(Color(0xff2a9d84), Color(0xffffcc5c), Color(0xffff6f69))
            FlowRow(modifier = Modifier.fillMaxWidth()) {
                repeat(7) {
                    if (it == 3) {
                        Cat(
                            Modifier.size(100.dp)
                                // Creating another shared element with the same key.
                                // Note that this modifier is *after* the size modifier,
                                // The size changes between these two shared elements, i.e. the
                                // size
                                // is not shared between the two shared elements.
                                .sharedElement(
                                    rememberSharedContentState("cat"),
                                    this@AnimatedContent,
                                )
                        )
                    } else {
                        Box(
                            Modifier.size(100.dp)
                                .background(colors[it % 3], RoundedCornerShape(5.dp))
                        )
                    }
                }
            }
        }
    }
}
```

| Parameters |
|---|---|
| `initialVelocity: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Velocity` | The velocity from the gesture system (e.g., from `onDragEnd`). |

## Public properties

### clipPathInOverlay

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

```
val clipPathInOverlay: Path?
```

The resolved clip path in overlay based on the `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.OverlayClip` defined for the shared content. `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState#clipPathInOverlay()` is set during Draw phase, before children are drawn. This means it is safe to query `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState#parentSharedContentState()`'s `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState#clipPathInOverlay()` when the shared content is drawn.

### isMatchFound

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

```
val isMatchFound: Boolean
```

Indicates whether a match of the same `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState#key()` has been found. `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedElement(androidx.compose.animation.SharedTransitionScope.SharedContentState,androidx.compose.animation.AnimatedVisibilityScope,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)` or `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedBounds(androidx.compose.animation.SharedTransitionScope.SharedContentState,androidx.compose.animation.AnimatedVisibilityScope,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.ResizeMode,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)` will not have any animation unless a match has been found.

*Caveat* : `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState#isMatchFound()` is only set to true *after* a new `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedElement(androidx.compose.animation.SharedTransitionScope.SharedContentState,androidx.compose.animation.AnimatedVisibilityScope,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)`/`https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedBounds(androidx.compose.animation.SharedTransitionScope.SharedContentState,androidx.compose.animation.AnimatedVisibilityScope,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.ResizeMode,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)` of the same `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState#key()` has been composed. If the new `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedBounds(androidx.compose.animation.SharedTransitionScope.SharedContentState,androidx.compose.animation.AnimatedVisibilityScope,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.ResizeMode,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)`/`https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedElement(androidx.compose.animation.SharedTransitionScope.SharedContentState,androidx.compose.animation.AnimatedVisibilityScope,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)` is declared in subcomposition (e.g. a LazyList) where the composition happens as a part of the measure/layout pass, that's when `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState#isMatchFound()` will become true.

### key

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

```
val key: Any
```

### parentSharedContentState

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

```
val parentSharedContentState: SharedTransitionScope.SharedContentState?
```

Returns the `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState` of a parent `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedBounds(androidx.compose.animation.SharedTransitionScope.SharedContentState,androidx.compose.animation.AnimatedVisibilityScope,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.ResizeMode,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)`, if any.