# SharedTransitionScope

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) Added in [1.7.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.7.0) Common/AllAndroid/JVM
- Cmn

  ```
  interface SharedTransitionScope : LookaheadScope
  ```

*** ** * ** ***

`https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope` provides a coordinator space in which shared elements/ shared bounds (when matched) will transform their bounds from one to another. Their position animation is always relative to the origin defined by where `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope` is in the tree.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope` also creates an overlay, in which all shared elements and shared bounds are rendered by default, so that they are not subject to their parent's fading or clipping, and can therefore transform the bounds without alpha jumps or being unintentionally clipped.

It is also `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope`'s responsibility to do the `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState` key match for all the `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)` defined in this scope. Note: key match will not work for `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState` created in different `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope`s.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope` oversees all the animations in its scope. When any of the animations is active, `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#isTransitionActive()` will be true. Once a bounds transform starts, by default the shared element or shared bounds will render the content in the overlay. The rendering will remain in the overlay until all other animations in the `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope` are finished (i.e. when `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#isTransitionActive()` == false).

```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.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
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.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Text
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.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
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

// This is the Image that we will add shared element modifier on. It's important to make sure
// modifiers that are not shared between the two shared elements (such as size modifiers if
// the size changes) are the parents (i.e. on the left side) of Modifier.sharedElement.
// Meanwhile, the modifiers that are shared between the shared elements (e.g. Modifier.clip
// in this case) are on the right side of the Modifier.sharedElement.
@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)),
    )
}

// Shared element key is of type `Any`, which means it can be id, string, etc. The only
// requirement for the key is that it should be the same for shared elements that you intend
// to match. Here we use the image resource id as the key.
val sharedElementKey = R.drawable.yt_profile
var showLargeImage 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 { showLargeImage = !showLargeImage }.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 = showLargeImage) { showLargeImageMode ->
        if (showLargeImageMode) {
            Cat(
                Modifier.fillMaxSize()
                    .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(
                        rememberSharedContentState(sharedElementKey),
                        // Using the AnimatedVisibilityScope from the AnimatedContent
                        // defined above.
                        this@AnimatedContent,
                    )
            )
            Text(
                "Cute Cat YT",
                fontSize = 40.sp,
                color = Color.Blue,
                // Prefer Modifier.sharedBounds for text, unless the texts in both initial
                // content and target content are exactly the same (i.e. same
                // size/font/color)
                modifier =
                    Modifier.fillMaxWidth()
                        // IMPORTANT: Prefer using wrapContentWidth/wrapContentSize over
                        // textAlign
                        // for shared text transition. This allows the layout system sees actual
                        // position and size of the text to facilitate bounds animation.
                        .wrapContentWidth(Alignment.CenterHorizontally)
                        .sharedBounds(
                            rememberSharedContentState(key = "text"),
                            this@AnimatedContent,
                        ),
            )
        } else {
            Column {
                Row(verticalAlignment = Alignment.CenterVertically) {
                    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(sharedElementKey),
                                this@AnimatedContent,
                            )
                    )
                    Text(
                        "Cute Cat YT",
                        // Change text color & size
                        fontSize = 20.sp,
                        color = Color.DarkGray,
                        // Prefer Modifier.sharedBounds for text, unless the texts in both
                        // initial content and target content are exactly the same (i.e. same
                        // size/font/color)
                        modifier =
                            Modifier
                                // The modifier that is not a part of the shared content, but
                                // rather
                                // for positioning and sizes should be on the *left* side of
                                // sharedBounds/sharedElement.
                                .padding(start = 20.dp)
                                .sharedBounds(
                                    // Here we use a string-based key, in contrast to the key
                                    // above.
                                    rememberSharedContentState(key = "text"),
                                    this@AnimatedContent,
                                ),
                    )
                }
                Box(
                    Modifier.fillMaxWidth()
                        .height(100.dp)
                        .background(Color(0xffffcc5c), RoundedCornerShape(5.dp))
                )
                Box(
                    Modifier.fillMaxWidth()
                        .height(100.dp)
                        .background(Color(0xff2a9d84), RoundedCornerShape(5.dp))
                )
            }
        }
    }
}
```

## Summary

| ### Nested types |
|---|
| `interface https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.OverlayClip` `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.OverlayClip` defines a specific clipping that should be applied to a `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)` or `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)` in the overlay. |
| `fun interface https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.PlaceholderSize` PlaceholderSize defines the size of the space that was or will be occupied by the exiting or entering `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)`. |
| `sealed interface https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode` There are two different modes to resize child layout 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)` during bounds transform: 1) `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode#scaleToBounds(androidx.compose.ui.layout.ContentScale,androidx.compose.ui.Alignment)` and 2) `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode#RemeasureToBounds()`. |
| `interface https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentConfig` `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentConfig` allows a shared element to be disabled or enabled dynamically through `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentConfig#(androidx.compose.animation.SharedTransitionScope.SharedContentState).isEnabled()` property. |
| `class https://developer.android.com/reference/kotlin/androidx/compose/animation/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. |

| ### Public functions |
|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.OverlayClip` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#OverlayClip(androidx.compose.ui.graphics.Shape)(clipShape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape)` Creates an `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#OverlayClip(androidx.compose.ui.graphics.Shape)` based on a specific `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#OverlayClip(androidx.compose.ui.graphics.Shape)`. | Cmn |
| `open https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentConfig` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#SharedContentConfig()()` `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#SharedContentConfig()` is a factory method that returns an `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#SharedContentConfig()` object with default implementations for all the functions and properties defined in the `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#SharedContentConfig()` interface. | Cmn |
| `open https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentConfig` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#SharedContentConfig(kotlin.Boolean)(permitTransformDuringDeferredTransition: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html)` `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#SharedContentConfig(kotlin.Boolean)` is a factory method that returns an `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#SharedContentConfig(kotlin.Boolean)` object with default implementations for all the functions and properties defined in the `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#SharedContentConfig(kotlin.Boolean)` interface. | Cmn |
| `open https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#rememberSharedContentState(kotlin.Any)(key: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html)` Creates and remembers a `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState` with a given `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#rememberSharedContentState(kotlin.Any)` and a given `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentConfig`. | Cmn |
| `open https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#rememberSharedContentState(kotlin.Any,androidx.compose.animation.SharedTransitionScope.SharedContentConfig)( key: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html, config: https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentConfig )` Creates and remembers a `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState` with a given `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#rememberSharedContentState(kotlin.Any,androidx.compose.animation.SharedTransitionScope.SharedContentConfig)` and a given `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentConfig`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).renderInSharedTransitionScopeOverlay(kotlin.Float,kotlin.Function0)( zIndexInOverlay: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, renderInOverlay: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html )` Renders the content in the `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope`'s overlay, where shared content (i.e. shared elements and shared bounds) is rendered by default. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.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)( sharedContentState: https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState, animatedVisibilityScope: https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope, enter: https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition, exit: https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition, boundsTransform: https://developer.android.com/reference/kotlin/androidx/compose/animation/BoundsTransform, resizeMode: https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode, placeholderSize: https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.PlaceholderSize, renderInOverlayDuringTransition: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, zIndexInOverlay: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, clipInOverlayDuringTransition: https://developer.android.com/reference/kotlin/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)` is a modifier that tags a layout with a `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState#key()`, such that entering and exiting shared bounds of the same key share the animated and continuously changing bounds during the layout change. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.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)( sharedContentState: https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState, animatedVisibilityScope: https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope, boundsTransform: https://developer.android.com/reference/kotlin/androidx/compose/animation/BoundsTransform, placeholderSize: https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.PlaceholderSize, renderInOverlayDuringTransition: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, zIndexInOverlay: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, clipInOverlayDuringTransition: https://developer.android.com/reference/kotlin/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 a modifier that tags a layout with a `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState#key()`, such that entering and exiting shared elements of the same key share the animated and continuously changing bounds during the layout change. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedElementWithCallerManagedVisibility(androidx.compose.animation.SharedTransitionScope.SharedContentState,kotlin.Boolean,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)( sharedContentState: https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState, visible: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, boundsTransform: https://developer.android.com/reference/kotlin/androidx/compose/animation/BoundsTransform, placeholderSize: https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.PlaceholderSize, renderInOverlayDuringTransition: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, zIndexInOverlay: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, clipInOverlayDuringTransition: https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.OverlayClip )` `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedElementWithCallerManagedVisibility(androidx.compose.animation.SharedTransitionScope.SharedContentState,kotlin.Boolean,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)` is a modifier that tags a layout with a `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState#key()`, such that entering and exiting shared elements of the same key share the animated and continuously changing bounds during the layout change. | Cmn |
| `open https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).skipToLookaheadPosition(kotlin.Function0)(enabled: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html)` A modifier that anchors a layout at the target position obtained from the lookahead pass during shared element transitions. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).skipToLookaheadSize(kotlin.Function0)(enabled: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html)` `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).skipToLookaheadSize(kotlin.Function0)` enables a layout to measure its child with the lookahead constraints, therefore laying out the child as if the transition has finished. | Cmn |

| ### Public properties |
|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#isTransitionActive()` Indicates whether there is any ongoing transition between matched `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)`. | Cmn |

### Inherited functions

From [androidx.compose.ui.layout.LookaheadScope](https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LookaheadScope) `open https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Offset` `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates.https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LookaheadScope#(androidx.compose.ui.layout.LayoutCoordinates).localLookaheadPositionOf(androidx.compose.ui.layout.LayoutCoordinates,androidx.compose.ui.geometry.Offset,kotlin.Boolean)(
sourceCoordinates: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates,
relativeToSource: https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Offset,
includeMotionFrameOfReference: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html
)`

Converts `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LookaheadScope#(androidx.compose.ui.layout.LayoutCoordinates).localLookaheadPositionOf(androidx.compose.ui.layout.LayoutCoordinates,androidx.compose.ui.geometry.Offset,kotlin.Boolean)` in `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LookaheadScope#(androidx.compose.ui.layout.LayoutCoordinates).localLookaheadPositionOf(androidx.compose.ui.layout.LayoutCoordinates,androidx.compose.ui.geometry.Offset,kotlin.Boolean)`'s lookahead coordinate space into local lookahead coordinates.
Cmn `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates` `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates.https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LookaheadScope#(androidx.compose.ui.layout.LayoutCoordinates).toLookaheadCoordinates()()`

Converts a `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates` into a `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates` in the Lookahead coordinate space.
Cmn

### Inherited properties

From [androidx.compose.ui.layout.LookaheadScope](https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LookaheadScope) `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates` `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Placeable.PlacementScope.https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LookaheadScope#(androidx.compose.ui.layout.Placeable.PlacementScope).lookaheadScopeCoordinates()`

Returns the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LayoutCoordinates` of the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/LookaheadScope`.
Cmn

## Public functions

### OverlayClip

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

```
fun OverlayClip(clipShape: Shape): SharedTransitionScope.OverlayClip
```

Creates an `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#OverlayClip(androidx.compose.ui.graphics.Shape)` based on a specific `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#OverlayClip(androidx.compose.ui.graphics.Shape)`.

### SharedContentConfig

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

```
open fun SharedContentConfig(): SharedTransitionScope.SharedContentConfig
```

`https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#SharedContentConfig()` is a factory method that returns an `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#SharedContentConfig()` object with default implementations for all the functions and properties defined in the `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#SharedContentConfig()` interface. More specifically, the returned `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentConfig` enables shared elements and bounds, and keeps them enabled while the animation is in-flight. It also sets the `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentConfig#(androidx.compose.animation.SharedTransitionScope.SharedContentState).alternativeTargetBoundsInTransitionScopeAfterRemoval(androidx.compose.ui.geometry.Rect,androidx.compose.ui.geometry.Size)` to null, ensuring the shared element transition is canceled immediately if the incoming shared element is removed during the animation.

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#SharedContentConfig()` |   |

### SharedContentConfig

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

```
open fun SharedContentConfig(permitTransformDuringDeferredTransition: Boolean): SharedTransitionScope.SharedContentConfig
```

`https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#SharedContentConfig(kotlin.Boolean)` is a factory method that returns an `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#SharedContentConfig(kotlin.Boolean)` object with default implementations for all the functions and properties defined in the `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#SharedContentConfig(kotlin.Boolean)` interface. More specifically, the returned `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentConfig` enables shared elements and bounds, and keeps them enabled while the animation is in-flight. It also sets the `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentConfig#(androidx.compose.animation.SharedTransitionScope.SharedContentState).alternativeTargetBoundsInTransitionScopeAfterRemoval(androidx.compose.ui.geometry.Rect,androidx.compose.ui.geometry.Size)` to null, ensuring the shared element transition is canceled immediately if the incoming shared element is removed during the animation.

```kotlin
import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.DeferredAnimatedContent
import androidx.compose.animation.MutableContentTransform
import androidx.compose.animation.SharedTransitionLayout
import androidx.compose.animation.SharedTransitionScope.SharedContentState
import androidx.compose.animation.core.DeferredTransitionState
import androidx.compose.animation.core.rememberDeferredTransition
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.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.outlined.Share
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.round

// In this example, we show how to use permitTransformDuringDeferredTransition to
// control whether a shared element transforms (scales/slides) with its parent container
// during a deferred transition (e.g., a Predictive Back gesture).
var state by remember { mutableStateOf("B") }
var isBackGestureInProgress by remember { mutableStateOf(false) }
var swipeOffset by remember { mutableStateOf(IntOffset.Zero) }

val transitionState = remember { DeferredTransitionState(state) }
val transition = rememberDeferredTransition(transitionState)

LaunchedEffect(isBackGestureInProgress, state) {
    if (isBackGestureInProgress) {
        transitionState.defer(state)
    } else {
        transitionState.animateTo(state)
    }
}

SharedTransitionLayout(Modifier.fillMaxSize()) {
    val mutableTransform = remember {
        MutableContentTransform {
            initialContentTransform { fullSize ->
                if (isBackGestureInProgress) {
                    val progressX = (swipeOffset.x.toFloat() / fullSize.width).coerceIn(0f, 1f)
                    // Shrink the exiting container down to 85% as the user swipes
                    scale = 1f - (progressX * 0.15f)
                    // Slide the container along the swipe
                    offset = swipeOffset
                }
            }
        }
    }

    transition.DeferredAnimatedContent(
        transitionSpec = { fadeIn(tween(200)) togetherWith fadeOut(tween(200)) },
        mutableTransformSpec = { mutableTransform },
        modifier = Modifier.fillMaxSize(),
    ) { targetState ->
        if (targetState == "A") {
            Box(Modifier.fillMaxSize().background(Color.Gray)) {
                // Destination elements on Screen A
                Box(
                    Modifier.align(Alignment.TopStart)
                        .sharedElement(
                            rememberSharedContentState(key = "item_1"),
                            animatedVisibilityScope = this@DeferredAnimatedContent,
                        )
                        .size(100.dp)
                        .background(Color.Red)
                )

                Box(
                    Modifier.align(Alignment.TopEnd)
                        .sharedElement(
                            rememberSharedContentState(key = "item_2"),
                            animatedVisibilityScope = this@DeferredAnimatedContent,
                        )
                        .size(100.dp)
                        .background(Color.Blue)
                )
            }
        } else {
            Box(Modifier.fillMaxSize().background(Color.LightGray)) {
                // Origin elements on Screen B

                // Shared element that permits transformations during the deferred phase
                // (default).
                // As the user swipes back to screen A, this element will visually scale and
                // translate in sync with container B. This is typical for content like images
                // or cards that should stay visually anchored to their shifting parent page.
                Box(
                    Modifier.align(Alignment.BottomStart)
                        .sharedElement(
                            rememberSharedContentState(
                                key = "item_1",
                                config =
                                    SharedContentConfig(
                                        permitTransformDuringDeferredTransition = true
                                    ),
                            ),
                            animatedVisibilityScope = this@DeferredAnimatedContent,
                        )
                        .size(200.dp)
                        .background(Color.Red)
                )

                // Shared element that disables transformations during the deferred phase.
                // It will remain static at its starting position (BottomEnd) relative to the
                // root layout, temporarily detaching from the moving container B. This is
                // useful for elements that should not scale or slide with the page container
                // during a predictive back gesture, such as a shared bottom navigation bar
                // or persistent header.
                Box(
                    Modifier.align(Alignment.BottomEnd)
                        .sharedElement(
                            rememberSharedContentState(
                                key = "item_2",
                                config =
                                    SharedContentConfig(
                                        permitTransformDuringDeferredTransition = false
                                    ),
                            ),
                            animatedVisibilityScope = this@DeferredAnimatedContent,
                        )
                        .size(200.dp)
                        .background(Color.Blue)
                )
            }
        }
    }
}
```

| Parameters |
|---|---|
| `permitTransformDuringDeferredTransition: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | defines whether the shared element should take part in the manual transformations applied to its container during the deferred phase of a `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/DeferredTransition`. This makes it look like it remains visually attached to its parent container. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#SharedContentConfig(kotlin.Boolean)` |   |

### rememberSharedContentState

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

```
@Composable
open fun rememberSharedContentState(key: Any): SharedTransitionScope.SharedContentState
```

Creates and remembers a `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState` with a given `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#rememberSharedContentState(kotlin.Any)` and a given `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentConfig`.

```kotlin
import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.SharedTransitionLayout
import androidx.compose.animation.SharedTransitionScope.ResizeMode.Companion.scaleToBounds
import androidx.compose.animation.SharedTransitionScope.SharedContentState
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredSize
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Text
import androidx.compose.material.icons.outlined.Create
import androidx.compose.material.icons.outlined.Share
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

var showText by remember { mutableStateOf(true) }
val rememberSharedKey = remember { Any() }
SharedTransitionLayout(Modifier.clickable { showText = !showText }) {
    AnimatedContent(
        targetState = showText,
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center,
    ) { showText ->
        if (showText) {
            Text(
                text =
                    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla" +
                        " mollis efficitur. Maecenas sit amet urna eu urna blandit suscipit efficitur" +
                        " eget mauris. Nullam eget aliquet ligula. Nunc id euismod elit. Morbi aliquam" +
                        " enim eros, eget consequat dolor consequat id. Quisque elementum faucibus" +
                        " congue. Curabitur mollis aliquet turpis, ut pellentesque justo eleifend nec.\n",
                fontSize = 20.sp,
                modifier =
                    Modifier.padding(20.dp)
                        // Creates a shared bounds for the text so that we can animate from the
                        // bounds of the text to the bounds of the image below.
                        .sharedBounds(
                            // Here we use an object created above as the key for the shared
                            // bounds transition.
                            sharedContentState =
                                rememberSharedContentState(key = rememberSharedKey),
                            animatedVisibilityScope = this,
                            // As the bounds transition from the text from/to the image, the
                            // text
                            // will be fading within in the bounds. This is also the default
                            // behavior.
                            enter = fadeIn(),
                            exit = fadeOut(),
                            // Since the text and the image have different aspect ratios, as
                            // the bounds transition from one to the other, we need to define
                            // how to fit the content in the changing bounds. Here we will
                            // be using crop to fit the content.
                            resizeMode = scaleToBounds(contentScale = ContentScale.Crop),
                        ),
            )
        } else {
            Image(
                painterResource(id = R.drawable.yt_profile),
                contentDescription = "cute cat",
                modifier =
                    Modifier.wrapContentSize()
                        // Creates a shared bounds for the image so that we can animate from the
                        // bounds of the text to the bounds of this image, and vice versa.
                        .sharedBounds(
                            sharedContentState =
                                rememberSharedContentState(key = rememberSharedKey),
                            animatedVisibilityScope = this,
                            resizeMode = scaleToBounds(contentScale = ContentScale.Crop),
                        )
                        .requiredSize(200.dp)
                        .clip(shape = RoundedCornerShape(10)),
            )
        }
    }
}
```

| Parameters |
|---|---|
| `key: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html` | will be used to match a shared element against others in the same `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope`. |

### rememberSharedContentState

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

```
@Composable
open fun rememberSharedContentState(
    key: Any,
    config: SharedTransitionScope.SharedContentConfig
): SharedTransitionScope.SharedContentState
```

Creates and remembers a `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState` with a given `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#rememberSharedContentState(kotlin.Any,androidx.compose.animation.SharedTransitionScope.SharedContentConfig)` and a given `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentConfig`.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#rememberSharedContentState(kotlin.Any,androidx.compose.animation.SharedTransitionScope.SharedContentConfig)` defines whether the shared element is enabled or disabled, and the alternative target bounds if the shared element is disposed amid animation (e.g., scrolled out of the viewport and subsequently disposed).

```kotlin
import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.SharedTransitionLayout
import androidx.compose.animation.SharedTransitionScope
import androidx.compose.animation.SharedTransitionScope.SharedContentState
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.gestures.snapping.SnapPosition
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.PageSize
import androidx.compose.foundation.pager.PagerDefaults
import androidx.compose.foundation.pager.PagerSnapDistance
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.material.icons.outlined.Share
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.LayoutCoordinates
import androidx.compose.ui.layout.lookaheadScopeCoordinates
import androidx.compose.ui.layout.onPlaced
import androidx.compose.ui.unit.Density
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.round
import androidx.compose.ui.unit.sp

// In this example, we will dynamically enable/disable shared elements for the items in the
// Pager. Specifically, we will only enable shared element transition for items that are
// completely visible in the viewport.
val colors = remember {
    listOf(
        Color(0xFFffd7d7.toInt()),
        Color(0xFFffe9d6.toInt()),
        Color(0xFFfffbd0.toInt()),
        Color(0xFFe3ffd9.toInt()),
        Color(0xFFd0fff8.toInt()),
    )
}
val TwoPagesPerViewport = remember {
    object : PageSize {
        override fun Density.calculateMainAxisPageSize(
            availableSpace: Int,
            pageSpacing: Int,
        ): Int {
            return (availableSpace - 2 * pageSpacing) / 2
        }
    }
}
var selectedColor by remember { mutableStateOf<Color?>(null) }
val pagerState = rememberPagerState { colors.size }
SharedTransitionLayout(modifier = Modifier.fillMaxSize()) {
    AnimatedContent(selectedColor) { colorSelected ->
        if (colorSelected == null) {
            HorizontalPager(
                modifier = Modifier.fillMaxSize().wrapContentSize(Alignment.Center),
                state = pagerState,
                pageSize = TwoPagesPerViewport,
                pageSpacing = 8.dp,
                snapPosition = SnapPosition.Center,
                flingBehavior =
                    PagerDefaults.flingBehavior(
                        state = pagerState,
                        pagerSnapDistance = PagerSnapDistance.atMost(3),
                    ),
            ) {
                val color = colors[it]
                var coordinates: LayoutCoordinates? by remember { mutableStateOf(null) }
                Box(
                    Modifier.clickable { selectedColor = color }
                        .onPlaced { coordinates = it }
                        .sharedElement(
                            rememberSharedContentState(
                                color,
                                object : SharedTransitionScope.SharedContentConfig {
                                    override val SharedContentState.isEnabled: Boolean
                                        get() {
                                            // This is a lambda that returns a Boolean
                                            // indicating
                                            // whether shared element should be enabled.
                                            val nonNullCoordinates =
                                                // If the item has never been placed, we will
                                                // consider
                                                // it enabled.
                                                coordinates ?: return true

                                            // In this specific case, we will use the
                                            // SharedTransitionLayout to approximate viewport.
                                            val scopeCoords =
                                                // Obtain the coordinates of the
                                                // SharedTransitionLayout/
                                                // SharedTransitionScope.
                                                // Since SharedTransitionScope is a
                                                // LookaheadScope, we
                                                // can use `lookaheadScopeCoordinates` to
                                                // acquire the
                                                // coordinates of the scope.
                                                lookaheadScopeCoordinates(nonNullCoordinates)
                                            val (w, h) = scopeCoords.size
                                            // Calculate the relative position of the item
                                            // within
                                            // SharedTransitionLayout.
                                            val positionInScope =
                                                scopeCoords.localPositionOf(nonNullCoordinates)
                                            // Check the left, top, right, bottom of the
                                            // relative
                                            // bounds of the item to see if it is within
                                            // SharedTransitionLayout. This result will inform
                                            // whether shared element transition should be
                                            // enabled
                                            // for this item.
                                            return positionInScope.x >= 0 &&
                                                positionInScope.y >= 0 &&
                                                positionInScope.x +
                                                    nonNullCoordinates.size.width <= w &&
                                                positionInScope.y +
                                                    nonNullCoordinates.size.height <= h
                                        }
                                },
                            ),
                            this@AnimatedContent,
                        )
                        .background(color)
                        .size(150.dp)
                )
            }
        } else {
            Box(
                Modifier.sharedElement(
                        rememberSharedContentState(colorSelected),
                        this@AnimatedContent,
                    )
                    .background(colorSelected)
                    .aspectRatio(1f)
                    .fillMaxWidth()
                    .clickable { selectedColor = null }
            )
        }
    }
}
```

```kotlin
import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.SharedTransitionLayout
import androidx.compose.animation.SharedTransitionScope
import androidx.compose.animation.SharedTransitionScope.SharedContentState
import androidx.compose.animation.core.updateTransition
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.togetherWith
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Arrangement.Absolute.SpaceEvenly
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.material.icons.outlined.Create
import androidx.compose.material.icons.outlined.Share
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.round
import androidx.compose.ui.unit.sp

// In this example, we will enable shared element transition for transitioning from A to B,
// from A to C, but not the other directions such as B -> A, or B -> C
@Composable
fun ScreenA(modifier: Modifier = Modifier) {
    Box(modifier.size(200.dp).background(Color.Red), contentAlignment = Alignment.Center) {
        Text(text = "A", fontSize = 50.sp)
    }
}

@Composable
fun ScreenB(modifier: Modifier = Modifier) {
    Box(modifier.size(400.dp).background(Color.Yellow), contentAlignment = Alignment.Center) {
        Text(text = "B", fontSize = 50.sp)
    }
}

@Composable
fun ScreenC(modifier: Modifier = Modifier) {
    Box(
        modifier.size(100.dp, 300.dp).background(Color.Blue),
        contentAlignment = Alignment.Center,
    ) {
        Text(text = "C", fontSize = 50.sp)
    }
}

var targetState by remember { mutableStateOf("A") }
val listOfEnabledStatePairs = remember { mutableStateListOf("A" to "B", "A" to "C") }

Column {
    Row(Modifier.fillMaxWidth(), horizontalArrangement = SpaceEvenly) {
        Button(onClick = { targetState = "A" }) { Text("To A") }
        Button(onClick = { targetState = "B" }) { Text("To B") }
        Button(onClick = { targetState = "C" }) { Text("To C") }
    }
    SharedTransitionLayout {
        Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
            val animatedContentTransition = updateTransition(targetState)

            val config = remember {
                // Creates a SharedContentConfig to dynamically enable/disable shared elements
                object : SharedTransitionScope.SharedContentConfig {
                    override val SharedContentState.isEnabled: Boolean
                        get() =
                            // Returns whether a shared element should be enabled based on
                            // the current state of the target state of the AnimatedContent.
                            listOfEnabledStatePairs.contains(
                                animatedContentTransition.currentState to
                                    animatedContentTransition.targetState
                            )
                }
            }
            animatedContentTransition.AnimatedContent(
                transitionSpec = { fadeIn() togetherWith fadeOut() using null }
            ) {
                Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                    when (it) {
                        "A" ->
                            ScreenA(
                                Modifier.sharedElement(
                                    rememberSharedContentState("square", config),
                                    this@AnimatedContent,
                                )
                            )

                        "B" ->
                            ScreenB(
                                Modifier.sharedElement(
                                    rememberSharedContentState("square", config),
                                    this@AnimatedContent,
                                )
                            )

                        "C" ->
                            ScreenC(
                                Modifier.sharedElement(
                                    rememberSharedContentState("square", config),
                                    this@AnimatedContent,
                                )
                            )
                    }
                }
            }
        }
    }
}
```

| Parameters |
|---|---|
| `key: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html` | will be used to match a shared element against others in the same `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope`. |
| `config: https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentConfig` | defines whether the shared element is enabled or disabled, and the alternative target bounds if the shared element is disposed amid animation (e.g., scrolled out of the viewport and subsequently disposed). |

### Modifier.renderInSharedTransitionScopeOverlay

Cmn 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+function:renderInSharedTransitionScopeOverlay) Added in [1.10.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.10.0)

```
fun Modifier.renderInSharedTransitionScopeOverlay(
    zIndexInOverlay: Float = 0.0f,
    renderInOverlay: () -> Boolean = { isTransitionActive }
): Modifier
```

Renders the content in the `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope`'s overlay, where shared content (i.e. shared elements and shared bounds) is rendered by default. This is useful for rendering content that is not shared on top of shared content to preserve a specific spatial relationship.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).renderInSharedTransitionScopeOverlay(kotlin.Float,kotlin.Function0)` dynamically controls whether the content should be rendered in the `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope`'s overlay. By default, it returns the same value as `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#isTransitionActive()`. This means the default behavior is to render the child layout of this modifier in the overlay only when the transition is active.

**IMPORTANT:** When elevating layouts into the overlay, the layout is no longer subjected to 1) its parent's clipping, and 2) parent's layer transform (e.g. alpha, scale, etc). Therefore, it is recommended to create an enter/exit animation (e.g. using `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope#(androidx.compose.ui.Modifier).animateEnterExit(androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String)`) for the child layout to avoid any abrupt visual changes.

```kotlin
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.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Button
import androidx.compose.material.FloatingActionButton
import androidx.compose.material.Icon
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.outlined.Create
import androidx.compose.material.icons.outlined.Favorite
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.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
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

// Create an Image that will be shared between the two shared elements.
@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 showThumbnail by remember { mutableStateOf(true) }
SharedTransitionLayout(
    Modifier.clickable { showThumbnail = !showThumbnail }.fillMaxSize().padding(10.dp)
) {
    Column(Modifier.padding(10.dp)) {
        // Create an AnimatedVisibility for the shared element, so that the layout siblings
        // (i.e. the two boxes below) will move in to fill the space during the exit transition.
        AnimatedVisibility(visible = showThumbnail) {
            Cat(
                Modifier.size(100.dp)
                    // Create a shared element, using string as the key
                    .sharedElement(
                        rememberSharedContentState(key = "YT"),
                        this@AnimatedVisibility,
                    )
            )
        }
        Box(
            Modifier.fillMaxWidth()
                .height(100.dp)
                .background(Color(0xffffcc5c), RoundedCornerShape(5.dp))
        )
        Box(
            Modifier.fillMaxWidth()
                .height(100.dp)
                .background(Color(0xff2a9d84), RoundedCornerShape(5.dp))
        )
    }
    Box(modifier = Modifier.fillMaxSize()) {
        AnimatedVisibility(!showThumbnail) {
            Cat(
                Modifier.fillMaxSize()
                    // Create another shared element, and make sure the string key matches
                    // the other shared element.
                    .sharedElement(
                        rememberSharedContentState(key = "YT"),
                        this@AnimatedVisibility,
                    )
            )
        }
        FloatingActionButton(
            modifier =
                Modifier.padding(20.dp)
                    .align(Alignment.BottomEnd)
                    // During shared element transition, shared elements will be rendered in
                    // overlay to escape any clipping or layer transform from parents. It also
                    // means they will render over on top of UI elements such as Floating Action
                    // Button. Once the transition is finished, they will be dropped from the
                    // overlay to their own DrawScopes. To help support keeping specific UI
                    // elements always on top, Modifier.renderInSharedTransitionScopeOverlay
                    // will temporarily elevate them into the overlay as well. By default,
                    // this modifier keeps content in overlay during the time when the
                    // shared transition is active (i.e.
                    // SharedTransitionScope#isTransitionActive).
                    // The duration can be customize via `renderInOverlay` parameter.
                    .renderInSharedTransitionScopeOverlay(
                        // zIndexInOverlay by default is 0f for this modifier and for shared
                        // elements. By overwriting zIndexInOverlay to 1f, we can ensure this
                        // FAB is rendered on top of the shared elements.
                        zIndexInOverlay = 1f
                    ),
            onClick = {},
        ) {
            Icon(Icons.Default.Favorite, contentDescription = "favorite")
        }
    }
}
```

| Parameters |
|---|---|
| `zIndexInOverlay: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 0.0f` | The zIndex of the content in the overlay. Defaults to 0f. |
| `renderInOverlay: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = { isTransitionActive }` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).renderInSharedTransitionScopeOverlay(kotlin.Float,kotlin.Function0)` determines when the content should be rendered in the overlay. Defaults to { `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#isTransitionActive()` }, which renders the content in the overlay only when the transition is active. |

### Modifier.sharedBounds

Cmn 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+function:sharedBounds) Added in [1.10.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.10.0)

```
fun Modifier.sharedBounds(
    sharedContentState: SharedTransitionScope.SharedContentState,
    animatedVisibilityScope: AnimatedVisibilityScope,
    enter: EnterTransition = SharedTransitionDefaults.EnterTransition,
    exit: ExitTransition = SharedTransitionDefaults.ExitTransition,
    boundsTransform: BoundsTransform = SharedTransitionDefaults.BoundsTransform,
    resizeMode: SharedTransitionScope.ResizeMode = SharedTransitionDefaults.ResizeMode,
    placeholderSize: SharedTransitionScope.PlaceholderSize = ContentSize,
    renderInOverlayDuringTransition: Boolean = true,
    zIndexInOverlay: Float = 0.0f,
    clipInOverlayDuringTransition: SharedTransitionScope.OverlayClip = ParentClip
): Modifier
```

`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)` is a modifier that tags a layout with a `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState#key()`, such that entering and exiting shared bounds of the same key share the animated and continuously changing bounds during the layout change. The bounds will be animated from the initial bounds defined by the exiting shared bounds to the target bounds calculated based on the incoming shared shared bounds. The animation for the bounds can be customized using `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)`. The target bounds for `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)` are determined by the bounds of the `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)` becoming visible based on the target state 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)`.

In contrast to `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)` is designed for shared content that has the visually different content. While the `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)` keeps the continuity of the bounds, the incoming and outgoing content within the `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 enter and exit in an enter/exit transition using `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).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)`. By default, `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeOut(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)` are used to fade the content in or out.

`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)` defines how the child layout 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)` should be resized during `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)`. By default, `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode#scaleToBounds(androidx.compose.ui.layout.ContentScale,androidx.compose.ui.Alignment)` will be used to measure the child content with lookahead constraints to arrive at the stable layout. Then the stable layout will be scaled to fit or fill (depending on the content scale used) the transforming bounds 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)`. If there's a need to relayout content (rather than scaling) based on the animated bounds size (e.g. dynamically resizing a Row), it's recommended to use `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode#RemeasureToBounds()` as the `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)`.

**Important** : When a shared bounds finds its match and starts a transition, it will be rendered into the overlay of the `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope` in order to avoid being faded in/out along with its parents or clipped by its parent as it transforms to the target size and position. This also means that any clipping or fading for the shared elements will need to be applied *explicitly* as the child 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)` (i.e. after `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)` modifier in the modifier chain). For example: `Modifier.sharedBounds(...).clip(shape = RoundedCornerShape(20.dp))`

By default, the `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)` is clipped by the `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 its 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. If the `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)` has no 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)` or if the 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)` has no clipping defined, it'll not be clipped. If additional clipping is desired to ensure child `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)` or child `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)` don't move outside of the this `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)`'s visual bounds in the overlay, `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)` can be used to specify the clipping.

While the shared bounds are rendered in overlay during the transition, its `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)` can be specified to allow them to render in a different order than their placement/zOrder when not in the overlay. For example, the title of a page is typically placed and rendered before the content below. During the transition, it may be desired to animate the title over on top of the other shared elements on that page to indicate significance or a point of interest. `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)` can be used to facilitate such use cases. `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)` is 0f by default.

`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)` is true by default. In some rare use cases, there may be no clipping or layer transform (fade, scale, etc) in the application that prevents shared elements from transitioning from one bounds to another without any clipping or sudden alpha change. In such cases, `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)` could be specified to false.

During a shared bounds transition, the space that was occupied by the exiting shared bounds and the space that the entering shared bounds will take up are considered placeholders. Their sizes during the shared element transition can be configured through `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)`. By default, it will be the same as the content size of the respective shared bounds. It can also be set to `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.PlaceholderSize#AnimatedSize()` or any other `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.PlaceholderSize` to report to their parent layout an animated size to create a visual effect where the parent layout dynamically adjusts the layout to accommodate the animated size of the shared elements.

```kotlin
import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.SharedTransitionLayout
import androidx.compose.animation.SharedTransitionScope.ResizeMode.Companion.scaleToBounds
import androidx.compose.animation.SharedTransitionScope.SharedContentState
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredSize
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Text
import androidx.compose.material.icons.outlined.Create
import androidx.compose.material.icons.outlined.Share
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

var showText by remember { mutableStateOf(true) }
val rememberSharedKey = remember { Any() }
SharedTransitionLayout(Modifier.clickable { showText = !showText }) {
    AnimatedContent(
        targetState = showText,
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center,
    ) { showText ->
        if (showText) {
            Text(
                text =
                    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla" +
                        " mollis efficitur. Maecenas sit amet urna eu urna blandit suscipit efficitur" +
                        " eget mauris. Nullam eget aliquet ligula. Nunc id euismod elit. Morbi aliquam" +
                        " enim eros, eget consequat dolor consequat id. Quisque elementum faucibus" +
                        " congue. Curabitur mollis aliquet turpis, ut pellentesque justo eleifend nec.\n",
                fontSize = 20.sp,
                modifier =
                    Modifier.padding(20.dp)
                        // Creates a shared bounds for the text so that we can animate from the
                        // bounds of the text to the bounds of the image below.
                        .sharedBounds(
                            // Here we use an object created above as the key for the shared
                            // bounds transition.
                            sharedContentState =
                                rememberSharedContentState(key = rememberSharedKey),
                            animatedVisibilityScope = this,
                            // As the bounds transition from the text from/to the image, the
                            // text
                            // will be fading within in the bounds. This is also the default
                            // behavior.
                            enter = fadeIn(),
                            exit = fadeOut(),
                            // Since the text and the image have different aspect ratios, as
                            // the bounds transition from one to the other, we need to define
                            // how to fit the content in the changing bounds. Here we will
                            // be using crop to fit the content.
                            resizeMode = scaleToBounds(contentScale = ContentScale.Crop),
                        ),
            )
        } else {
            Image(
                painterResource(id = R.drawable.yt_profile),
                contentDescription = "cute cat",
                modifier =
                    Modifier.wrapContentSize()
                        // Creates a shared bounds for the image so that we can animate from the
                        // bounds of the text to the bounds of this image, and vice versa.
                        .sharedBounds(
                            sharedContentState =
                                rememberSharedContentState(key = rememberSharedKey),
                            animatedVisibilityScope = this,
                            resizeMode = scaleToBounds(contentScale = ContentScale.Crop),
                        )
                        .requiredSize(200.dp)
                        .clip(shape = RoundedCornerShape(10)),
            )
        }
    }
}
```

Since `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)` show both incoming and outgoing content in its bounds, it affords opportunities to do interesting transitions where additional `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)` and `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)` can be nested in 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)`. See the sample code below for a more complex example with nested shared bounds/elements.

```kotlin
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.EnterTransition
import androidx.compose.animation.ExitTransition
import androidx.compose.animation.SharedTransitionLayout
import androidx.compose.animation.SharedTransitionScope
import androidx.compose.animation.SharedTransitionScope.SharedContentState
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredHeightIn
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Icon
import androidx.compose.material.Surface
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.outlined.Create
import androidx.compose.material.icons.outlined.Favorite
import androidx.compose.material.icons.outlined.Share
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.round

// Nested shared bounds sample.
val selectionColor = Color(0xff3367ba)
var expanded by remember { mutableStateOf(true) }
SharedTransitionLayout(
    Modifier.fillMaxSize().clickable { expanded = !expanded }.background(Color(0x88000000))
) {
    AnimatedVisibility(
        visible = expanded,
        enter = EnterTransition.None,
        exit = ExitTransition.None,
    ) {
        Box(modifier = Modifier.fillMaxSize()) {
            Surface(
                Modifier.align(Alignment.BottomCenter)
                    .padding(20.dp)
                    .sharedBounds(
                        rememberSharedContentState(key = "container"),
                        this@AnimatedVisibility,
                    )
                    .requiredHeightIn(max = 60.dp),
                shape = RoundedCornerShape(50),
            ) {
                Row(
                    Modifier.padding(10.dp)
                        // By using Modifier.skipToLookaheadSize(), we are telling the layout
                        // system to layout the children of this node as if the animations had
                        // all finished. This avoid re-laying out the Row with animated width,
                        // which is _sometimes_ desirable. Try removing this modifier and
                        // observe the effect.
                        .skipToLookaheadSize()
                ) {
                    Icon(
                        Icons.Outlined.Share,
                        contentDescription = "Share",
                        modifier =
                            Modifier.padding(
                                top = 10.dp,
                                bottom = 10.dp,
                                start = 10.dp,
                                end = 20.dp,
                            ),
                    )
                    Icon(
                        Icons.Outlined.Favorite,
                        contentDescription = "Favorite",
                        modifier =
                            Modifier.padding(
                                top = 10.dp,
                                bottom = 10.dp,
                                start = 10.dp,
                                end = 20.dp,
                            ),
                    )
                    Icon(
                        Icons.Outlined.Create,
                        contentDescription = "Create",
                        tint = Color.White,
                        modifier =
                            Modifier.sharedBounds(
                                    rememberSharedContentState(key = "icon_background"),
                                    this@AnimatedVisibility,
                                )
                                .background(selectionColor, RoundedCornerShape(50))
                                .padding(
                                    top = 10.dp,
                                    bottom = 10.dp,
                                    start = 20.dp,
                                    end = 20.dp,
                                )
                                .sharedElement(
                                    rememberSharedContentState(key = "icon"),
                                    this@AnimatedVisibility,
                                ),
                    )
                }
            }
        }
    }
    AnimatedVisibility(
        visible = !expanded,
        enter = EnterTransition.None,
        exit = ExitTransition.None,
    ) {
        Box(modifier = Modifier.fillMaxSize()) {
            Surface(
                Modifier.align(Alignment.BottomEnd)
                    .padding(30.dp)
                    .sharedBounds(
                        rememberSharedContentState(key = "container"),
                        this@AnimatedVisibility,
                        enter = EnterTransition.None,
                    )
                    .sharedBounds(
                        rememberSharedContentState(key = "icon_background"),
                        this@AnimatedVisibility,
                        resizeMode = SharedTransitionScope.ResizeMode.RemeasureToBounds,
                        enter = EnterTransition.None,
                        exit = ExitTransition.None,
                    ),
                shape = RoundedCornerShape(30.dp),
                color = selectionColor,
            ) {
                Icon(
                    Icons.Outlined.Create,
                    contentDescription = "Create",
                    tint = Color.White,
                    modifier =
                        Modifier.padding(30.dp)
                            .size(40.dp)
                            .sharedElement(
                                rememberSharedContentState(key = "icon"),
                                this@AnimatedVisibility,
                            ),
                )
            }
        }
    }
}
```

| Parameters |
|---|---|
| `sharedContentState: https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState` | The `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState` of the shared element. This defines the key used for matching shared elements. |
| `animatedVisibilityScope: https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope` | The `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope` in which the shared element is declared. This helps the system determine if the shared element is incoming or outgoing. |
| `enter: https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition = SharedTransitionDefaults.EnterTransition` | The enter transition used for incoming content while it's displayed within the transforming bounds. This defaults to a fade-in. |
| `exit: https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition = SharedTransitionDefaults.ExitTransition` | The exit transition used for outgoing content while it's displayed within the transforming bounds. This defaults to a fade-out. |
| `boundsTransform: https://developer.android.com/reference/kotlin/androidx/compose/animation/BoundsTransform = SharedTransitionDefaults.BoundsTransform` | A `https://developer.android.com/reference/kotlin/androidx/compose/animation/BoundsTransform` to customize the animation specification based on the shared element's initial and target bounds for the transition. |
| `resizeMode: https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode = SharedTransitionDefaults.ResizeMode` | A `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode` that defines how the child layout 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)` should be resized during `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)`. By default, `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode#scaleToBounds(androidx.compose.ui.layout.ContentScale,androidx.compose.ui.Alignment)` is used to scale the child content to fit the transforming bounds. This avoids frame-by-frame remeasurement. |
| `placeholderSize: https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.PlaceholderSize = ContentSize` | A `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.PlaceholderSize` that defines the size the transforming layout reports to the layout system during the transition. By default, this is the shared bounds' content size (without any scaling or transformation). |
| `renderInOverlayDuringTransition: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Whether the shared bounds should be rendered in the overlay during the transition. Defaults to `true`. |
| `zIndexInOverlay: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 0.0f` | The `zIndex` of the shared bounds within the overlay, enabling custom z-ordering for multiple shared bounds or elements. |
| `clipInOverlayDuringTransition: https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.OverlayClip = ParentClip` | The clipping path of the shared bounds in the overlay. By default, it uses the resolved clip path from its parent `sharedBounds` (if applicable). |

| See also |
|---|---|
| `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)` |   |

### Modifier.sharedElement

Cmn 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+function:sharedElement) Added in [1.10.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.10.0)

```
fun Modifier.sharedElement(
    sharedContentState: SharedTransitionScope.SharedContentState,
    animatedVisibilityScope: AnimatedVisibilityScope,
    boundsTransform: BoundsTransform = SharedTransitionDefaults.BoundsTransform,
    placeholderSize: SharedTransitionScope.PlaceholderSize = ContentSize,
    renderInOverlayDuringTransition: Boolean = true,
    zIndexInOverlay: Float = 0.0f,
    clipInOverlayDuringTransition: SharedTransitionScope.OverlayClip = ParentClip
): Modifier
```

`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 a modifier that tags a layout with a `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState#key()`, such that entering and exiting shared elements of the same key share the animated and continuously changing bounds during the layout change. The bounds will be animated from the initial bounds defined by the exiting shared element to the target bounds calculated based on the incoming shared element. The animation for the bounds can be customized using `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)`. During the bounds transform, `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)` will re-measure and relayout its child layout using fixed constraints derived from its animated size, similar to `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.ResizeMode#RemeasureToBounds()` resizeMode in `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 contrast to `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 designed for shared content that has the exact match in terms of visual content and layout when the measure constraints are the same. Such examples include image assets, icons, `https://developer.android.com/reference/kotlin/androidx/compose/runtime/MovableContent` etc. Only the shared element that is becoming visible will be rendered during the transition. The bounds for shared element are determined by the bounds of the shared element becoming visible based on the target state of `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)`.

**Important** : When a shared element finds its match and starts a transition, it will be rendered into the overlay of the `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope` in order to avoid being faded in/out along with its parents or clipped by its parent as it transforms to the target size and position. This also means that any clipping or fading for the shared elements will need to be applied *explicitly* as the child of `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)` (i.e. after `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)` modifier in the modifier chain). For example: `Modifier.sharedElement(...).clip(shape = RoundedCornerShape(20.dp)).animateEnterExit(...)`

By default, the `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 clipped by the `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)` of its 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 the `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)` has no 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)` or if the 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)` has no clipping defined, it'll not be clipped. If additional clipping is desired to ensure `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)` doesn't move outside of a visual bounds, `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)` can be used to specify the clipping for when the shared element is going through an active transition towards a new target bounds.

While the shared elements are rendered in overlay during the transition, its `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)` can be specified to allow shared elements to render in a different order than their placement/zOrder when not in the overlay. For example, the title of a page is typically placed and rendered before the content below. During the transition, it may be desired to animate the title over on top of the other shared elements on that page to indicate significance or a point of interest. `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)` can be used to facilitate such use cases. `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 0f by default.

`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 true by default. In some rare use cases, there may be no clipping or layer transform (fade, scale, etc) in the application that prevents shared elements from transitioning from one bounds to another without any clipping or sudden alpha change. In such cases, `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)` could be specified to false.

During a shared element transition, the space that was occupied by the exiting shared element and the space that the entering shared element will take up are considered placeholders. Their sizes during the shared element transition can be configured through `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)`. By default, it will be the same as the content size of the respective shared element. It can also be set to `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.PlaceholderSize#AnimatedSize()` or any other `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.PlaceholderSize` to report to their parent layout an animated size to create a visual effect where the parent layout dynamically adjusts the layout to accommodate the animated size of the shared elements.

Below is an example of using shared elements in a transition from a list to a details page. For a more complex example using `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)` along with `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)`, see the API documentation for `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionLayout.composable#SharedTransitionLayout(androidx.compose.ui.Modifier,kotlin.Function1)`.

```kotlin
import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.SharedTransitionLayout
import androidx.compose.animation.SharedTransitionScope.SharedContentState
import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.Text
import androidx.compose.material.icons.outlined.Share
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.clipToBounds
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

var itemSelected by remember { mutableStateOf<Int?>(null) }
SharedTransitionLayout(modifier = Modifier.clipToBounds().fillMaxSize()) {
    val listState = rememberLazyListState()
    AnimatedContent(itemSelected) { selected ->
        when (selected) {
            null -> { // No item selected, show list
                LazyColumn(state = listState) {
                    items(50) { item ->
                        Row(
                            modifier = Modifier.clickable { itemSelected = item }.fillMaxWidth()
                        ) {
                            Image(
                                painter = painterResource(R.drawable.yt_profile),
                                modifier =
                                    Modifier.size(100.dp)
                                        .sharedElement(
                                            rememberSharedContentState(key = "item-image$item"),
                                            animatedVisibilityScope = this@AnimatedContent,
                                        ),
                                contentScale = ContentScale.Crop,
                                contentDescription = null,
                            )
                            Spacer(Modifier.size(15.dp))
                            Text(
                                "Item $item",
                                modifier = Modifier.align(Alignment.CenterVertically),
                            )
                        }
                    }
                }
            }
            else -> { // show detail for item selected
                Column(modifier = Modifier.fillMaxSize().clickable { itemSelected = null }) {
                    Image(
                        painter = painterResource(R.drawable.yt_profile),
                        modifier =
                            Modifier.sharedElement(
                                    rememberSharedContentState(key = "item-image$selected"),
                                    animatedVisibilityScope = this@AnimatedContent,
                                )
                                .fillMaxWidth(),
                        contentScale = ContentScale.Crop,
                        contentDescription = null,
                    )
                    Text("Item $itemSelected", fontSize = 23.sp)
                }
            }
        }
    }
}
```

| Parameters |
|---|---|
| `sharedContentState: https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState` | The `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState` of the shared element. This defines the key used for matching shared elements. |
| `animatedVisibilityScope: https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope` | The `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope` in which the shared element is declared. This helps the system determine if the shared element is incoming or outgoing. |
| `boundsTransform: https://developer.android.com/reference/kotlin/androidx/compose/animation/BoundsTransform = SharedTransitionDefaults.BoundsTransform` | A `https://developer.android.com/reference/kotlin/androidx/compose/animation/BoundsTransform` to customize the animation specification based on the shared element's initial and target bounds during the transition. |
| `placeholderSize: https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.PlaceholderSize = ContentSize` | A `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.PlaceholderSize` that defines the size the transforming layout reports to the layout system during the transition. By default, this is the shared element's content size (without any scaling or transformation). |
| `renderInOverlayDuringTransition: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Whether the shared element should be rendered in the overlay during the transition. Defaults to `true`. |
| `zIndexInOverlay: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 0.0f` | The `zIndex` of the shared element within the overlay, enabling custom z-ordering for multiple shared elements. |
| `clipInOverlayDuringTransition: https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.OverlayClip = ParentClip` | The clipping path of the shared element in the overlay. By default, it uses the resolved clip path from its parent `sharedBounds` (if applicable). |

| See also |
|---|---|
| `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/SharedTransitionLayout.composable#SharedTransitionLayout(androidx.compose.ui.Modifier,kotlin.Function1)` |   |

### Modifier.sharedElementWithCallerManagedVisibility

Cmn 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+function:sharedElementWithCallerManagedVisibility) Added in [1.10.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.10.0)

```
fun Modifier.sharedElementWithCallerManagedVisibility(
    sharedContentState: SharedTransitionScope.SharedContentState,
    visible: Boolean,
    boundsTransform: BoundsTransform = SharedTransitionDefaults.BoundsTransform,
    placeholderSize: SharedTransitionScope.PlaceholderSize = ContentSize,
    renderInOverlayDuringTransition: Boolean = true,
    zIndexInOverlay: Float = 0.0f,
    clipInOverlayDuringTransition: SharedTransitionScope.OverlayClip = ParentClip
): Modifier
```

`https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedElementWithCallerManagedVisibility(androidx.compose.animation.SharedTransitionScope.SharedContentState,kotlin.Boolean,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)` is a modifier that tags a layout with a `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState#key()`, such that entering and exiting shared elements of the same key share the animated and continuously changing bounds during the layout change. The bounds will be animated from the initial bounds defined by the exiting shared element to the target bounds calculated based on the incoming shared element. The animation for the bounds can be customized using `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedElementWithCallerManagedVisibility(androidx.compose.animation.SharedTransitionScope.SharedContentState,kotlin.Boolean,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)`.

Compared to `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).sharedElementWithCallerManagedVisibility(androidx.compose.animation.SharedTransitionScope.SharedContentState,kotlin.Boolean,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)` is designed for shared element transitions where the shared element is not a part of the content that is being animated out by `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`. Therefore, it is the caller's responsibility to explicitly remove the exiting shared element (i.e. shared elements where `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedElementWithCallerManagedVisibility(androidx.compose.animation.SharedTransitionScope.SharedContentState,kotlin.Boolean,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)` == false) from the tree as appropriate. Typically this is when the transition is finished (i.e. `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#isTransitionActive()` == false). The target bounds is derived from the `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedElementWithCallerManagedVisibility(androidx.compose.animation.SharedTransitionScope.SharedContentState,kotlin.Boolean,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)` with `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedElementWithCallerManagedVisibility(androidx.compose.animation.SharedTransitionScope.SharedContentState,kotlin.Boolean,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)` being true.

In contrast to `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)`, this modifier is intended for shared content that has the exact match in terms of visual content and layout when the measure constraints are the same. Such examples include image assets, icons, `https://developer.android.com/reference/kotlin/androidx/compose/runtime/MovableContent` etc. Only the shared element that is becoming visible will be rendered during the transition.

**Important** : When a shared element finds its match and starts a transition, it will be rendered into the overlay of the `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope` in order to avoid being faded in/out along with its parents or clipped by its parent as it transforms to the target size and position. This also means that any clipping or fading for the shared elements will need to be applied *explicitly* as the child of `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedElementWithCallerManagedVisibility(androidx.compose.animation.SharedTransitionScope.SharedContentState,kotlin.Boolean,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)` (i.e. after `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedElementWithCallerManagedVisibility(androidx.compose.animation.SharedTransitionScope.SharedContentState,kotlin.Boolean,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)` modifier in the modifier chain). For example:

```kotlin
Modifier.sharedElementWithCallerManagedVisibility(...)
        .clip(shape = RoundedCornerShape(20.dp))
```

By default, the `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedElementWithCallerManagedVisibility(androidx.compose.animation.SharedTransitionScope.SharedContentState,kotlin.Boolean,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)` is clipped by the `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedElementWithCallerManagedVisibility(androidx.compose.animation.SharedTransitionScope.SharedContentState,kotlin.Boolean,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)` of its 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 the `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedElementWithCallerManagedVisibility(androidx.compose.animation.SharedTransitionScope.SharedContentState,kotlin.Boolean,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)` has no 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)` or if the 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)` has no clipping defined, it'll not be clipped. If additional clipping is desired to ensure `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedElementWithCallerManagedVisibility(androidx.compose.animation.SharedTransitionScope.SharedContentState,kotlin.Boolean,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)` doesn't move outside of a visual bounds, `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedElementWithCallerManagedVisibility(androidx.compose.animation.SharedTransitionScope.SharedContentState,kotlin.Boolean,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)` can be used to specify the clipping for when the shared element is going through an active transition towards a new target bounds.

While the shared elements are rendered in overlay during the transition, its `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedElementWithCallerManagedVisibility(androidx.compose.animation.SharedTransitionScope.SharedContentState,kotlin.Boolean,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)` can be specified to allow shared elements to render in a different order than their placement/zOrder when not in the overlay. For example, the title of a page is typically placed and rendered before the content below. During the transition, it may be desired to animate the title over on top of the other shared elements on that page to indicate significance or a point of interest. `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedElementWithCallerManagedVisibility(androidx.compose.animation.SharedTransitionScope.SharedContentState,kotlin.Boolean,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)` can be used to facilitate such use cases. `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedElementWithCallerManagedVisibility(androidx.compose.animation.SharedTransitionScope.SharedContentState,kotlin.Boolean,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)` is 0f by default.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedElementWithCallerManagedVisibility(androidx.compose.animation.SharedTransitionScope.SharedContentState,kotlin.Boolean,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)` is true by default. In some rare use cases, there may be no clipping or layer transform (fade, scale, etc) in the application that prevents shared elements from transitioning from one bounds to another without any clipping or sudden alpha change. In such cases, `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedElementWithCallerManagedVisibility(androidx.compose.animation.SharedTransitionScope.SharedContentState,kotlin.Boolean,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)` could be specified to false.

During a shared element transition, the space that was occupied by the exiting shared element and the space that the entering shared element will take up are considered placeholders. Their sizes during the shared element transition can be configured through `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).sharedElementWithCallerManagedVisibility(androidx.compose.animation.SharedTransitionScope.SharedContentState,kotlin.Boolean,androidx.compose.animation.BoundsTransform,androidx.compose.animation.SharedTransitionScope.PlaceholderSize,kotlin.Boolean,kotlin.Float,androidx.compose.animation.SharedTransitionScope.OverlayClip)`. By default, it will be the same as the content size of the respective shared element. It can also be set to `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.PlaceholderSize#AnimatedSize()` or any other `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.PlaceholderSize` to report to their parent layout an animated size to create a visual effect where the parent layout dynamically adjusts the layout to accommodate the animated size of the shared elements.

```kotlin
import androidx.compose.animation.SharedTransitionLayout
import androidx.compose.animation.SharedTransitionScope.SharedContentState
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.outlined.Share
import androidx.compose.runtime.getValue
import androidx.compose.runtime.movableContentOf
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.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

var showThumbnail by remember { mutableStateOf(true) }
val movableContent = remember {
    movableContentOf {
        val cornerRadius = animateDpAsState(targetValue = if (!showThumbnail) 20.dp else 5.dp)
        Image(
            painterResource(id = R.drawable.yt_profile),
            contentDescription = "cute cat",
            contentScale = ContentScale.FillHeight,
            modifier = Modifier.clip(shape = RoundedCornerShape(cornerRadius.value)),
        )
    }
}
SharedTransitionLayout(
    Modifier.clickable { showThumbnail = !showThumbnail }.fillMaxSize().padding(10.dp)
) {
    Column {
        Box(
            // When using Modifier.sharedElementWithCallerManagedVisibility(), even when
            // visible == false, the layout will continue to occupy space in its parent layout.
            // The content will continue to be composed, unless the content is [MovableContent]
            // like in this example below.
            Modifier.sharedElementWithCallerManagedVisibility(
                    rememberSharedContentState(key = "YT"),
                    showThumbnail,
                )
                .size(100.dp)
        ) {
            if (showThumbnail) {
                movableContent()
            }
        }
        Box(
            Modifier.fillMaxWidth()
                .height(100.dp)
                .background(Color(0xffffcc5c), RoundedCornerShape(5.dp))
        )
        Box(
            Modifier.fillMaxWidth()
                .height(100.dp)
                .background(Color(0xff2a9d84), RoundedCornerShape(5.dp))
        )
    }
    Box(
        Modifier.fillMaxSize()
            .aspectRatio(1f)
            .sharedElementWithCallerManagedVisibility(
                rememberSharedContentState(key = "YT"),
                !showThumbnail,
            )
    ) {
        if (!showThumbnail) {
            movableContent()
        }
    }
}
```

| Parameters |
|---|---|
| `sharedContentState: https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState` | The `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.SharedContentState` of the shared element. This defines the key used for matching shared elements. |
| `visible: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | Whether the shared element is visible. |
| `boundsTransform: https://developer.android.com/reference/kotlin/androidx/compose/animation/BoundsTransform = SharedTransitionDefaults.BoundsTransform` | A `https://developer.android.com/reference/kotlin/androidx/compose/animation/BoundsTransform` to customize the animation specification based on the shared element's initial and target bounds during the transition. |
| `placeholderSize: https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.PlaceholderSize = ContentSize` | A `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.PlaceholderSize` that defines the size the transforming layout reports to the layout system during the transition. By default, this is the shared element's content size (without any scaling or transformation). |
| `renderInOverlayDuringTransition: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Whether the shared element should be rendered in the overlay during the transition. Defaults to `true`. |
| `zIndexInOverlay: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 0.0f` | The `zIndex` of the shared element within the overlay, enabling custom z-ordering for multiple shared elements. |
| `clipInOverlayDuringTransition: https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope.OverlayClip = ParentClip` | The clipping path of the shared element in the overlay. By default, it uses the resolved clip path from its parent `sharedBounds` (if applicable). |

### Modifier.skipToLookaheadPosition

Cmn 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+function:skipToLookaheadPosition) Added in [1.10.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.10.0)

```
open fun Modifier.skipToLookaheadPosition(
    enabled: () -> Boolean = { isTransitionActive }
): Modifier
```

A modifier that anchors a layout at the target position obtained from the lookahead pass during shared element transitions.

This modifier ensures that a layout maintains its target position determined by the lookahead layout pass, preventing it from being influenced by layout changes in the tree during shared element transitions. This is particularly useful for preventing unwanted movement or repositioning of elements during animated transitions.

**Important** : `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).skipToLookaheadPosition(kotlin.Function0)` anchors the layout at the lookahead position **relative to** the `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionLayout.composable#SharedTransitionLayout(androidx.compose.ui.Modifier,kotlin.Function1)`. It does NOT necessarily anchor the layout within the window. More specifically, if a `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionLayout.composable#SharedTransitionLayout(androidx.compose.ui.Modifier,kotlin.Function1)` re-positions itself, any child layout using `skipToLookaheadPosition` will move along with it. If it is desirable to anchor a layout relative to a window, it's recommended to set up `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionLayout.composable#SharedTransitionLayout(androidx.compose.ui.Modifier,kotlin.Function1)` in a way that it does not change position in the window.

Note: `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).skipToLookaheadPosition(kotlin.Function0)` by default is only enabled via `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).skipToLookaheadPosition(kotlin.Function0)` lambda during a shared transition. It is recommended to enable it only when necessary. When active, it counteracts its ancestor layout's movement, which can incur extra placement pass costs if the parent layout frequently moves (e.g., during scrolling or animation).

```kotlin
import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.SharedTransitionLayout
import androidx.compose.animation.SharedTransitionScope
import androidx.compose.animation.SharedTransitionScope.SharedContentState
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Arrangement.Absolute.SpaceEvenly
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.material.icons.outlined.Create
import androidx.compose.material.icons.outlined.Share
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.clipToBounds
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.round
import androidx.compose.ui.unit.sp

// In this sample, we are creating an animating clip bounds using shared element transition.
// In the meantime, we need to anchor the content that is being clipped at its target position
// using skipToLookaheadPosition while the clip bounds moves and resizes via animations.
var target by remember { mutableStateOf(true) }
BackHandler { target = !target }
// Creates a SharedTransitionLayout to provide its child content with a SharedTransitionScope.
// The child content can therefore set up shared element transitions, and access
// skipToLookaheadPosition modifier, as well as other functionalities available in
// SharedTransitionScope.
SharedTransitionLayout {
    AnimatedContent(targetState = target) {
        if (it) {
            Box(Modifier.fillMaxSize()) {
                Button(
                    modifier =
                        Modifier.align(Alignment.BottomCenter)
                            .sharedBounds(
                                rememberSharedContentState("clip"),
                                this@AnimatedContent,
                            ),
                    onClick = { target = false },
                ) {
                    Text("Toggle State")
                }
            }
        } else {
            Column(
                // Use sharedBounds chained with clipToBounds to animate the clip bounds
                // from the previous size and position derived from the shared bounds above
                // (when target == true).
                Modifier.sharedBounds(
                        rememberSharedContentState("clip"),
                        this@AnimatedContent,
                        resizeMode = SharedTransitionScope.ResizeMode.RemeasureToBounds,
                    )
                    .clipToBounds()
                    // The sharedBounds above would resize its child layout and move it as
                    // needed. Here we use `skipToLookaheadSize` chained with
                    // `skipToLookaheadPosition` to keep the child content from being resized
                    // or moved. As such, only the clip bounds is being animated, creating
                    // a reveal animation.
                    .skipToLookaheadSize()
                    .skipToLookaheadPosition()
                    .fillMaxSize()
                    .background(Color.Black),
                verticalArrangement = Arrangement.SpaceEvenly,
                horizontalAlignment = Alignment.CenterHorizontally,
            ) {
                Text("Hello", fontSize = 80.sp, color = Color.White)
                Text("Shared", fontSize = 80.sp, color = Color.White)
                Text("Clip", fontSize = 80.sp, color = Color.White)
                Text("Bounds", fontSize = 80.sp, color = Color.White)
            }
        }
    }
}
```

| Parameters |
|---|---|
| `enabled: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = { isTransitionActive }` | A lambda that determines when the modifier should be active. Defaults to `{ isTransitionActive }`, which enables the modifier only during active shared element transitions |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionLayout.composable#SharedTransitionLayout(androidx.compose.ui.Modifier,kotlin.Function1)` |   |
| `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)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).skipToLookaheadSize(kotlin.Function0)` |   |

### Modifier.skipToLookaheadSize

Cmn 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+function:skipToLookaheadSize) Added in [1.10.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.10.0)

```
fun Modifier.skipToLookaheadSize(
    enabled: () -> Boolean = { isTransitionActive }
): Modifier
```

`https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).skipToLookaheadSize(kotlin.Function0)` enables a layout to measure its child with the lookahead constraints, therefore laying out the child as if the transition has finished. This is particularly helpful for layouts where re-flowing content based on animated constraints is undesirable, such as texts.

In the sample below, try remove the `https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope#(androidx.compose.ui.Modifier).skipToLookaheadSize(kotlin.Function0)` modifier and observe the difference:

```kotlin
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.EnterTransition
import androidx.compose.animation.ExitTransition
import androidx.compose.animation.SharedTransitionLayout
import androidx.compose.animation.SharedTransitionScope
import androidx.compose.animation.SharedTransitionScope.SharedContentState
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredHeightIn
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Icon
import androidx.compose.material.Surface
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.outlined.Create
import androidx.compose.material.icons.outlined.Favorite
import androidx.compose.material.icons.outlined.Share
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.round

// Nested shared bounds sample.
val selectionColor = Color(0xff3367ba)
var expanded by remember { mutableStateOf(true) }
SharedTransitionLayout(
    Modifier.fillMaxSize().clickable { expanded = !expanded }.background(Color(0x88000000))
) {
    AnimatedVisibility(
        visible = expanded,
        enter = EnterTransition.None,
        exit = ExitTransition.None,
    ) {
        Box(modifier = Modifier.fillMaxSize()) {
            Surface(
                Modifier.align(Alignment.BottomCenter)
                    .padding(20.dp)
                    .sharedBounds(
                        rememberSharedContentState(key = "container"),
                        this@AnimatedVisibility,
                    )
                    .requiredHeightIn(max = 60.dp),
                shape = RoundedCornerShape(50),
            ) {
                Row(
                    Modifier.padding(10.dp)
                        // By using Modifier.skipToLookaheadSize(), we are telling the layout
                        // system to layout the children of this node as if the animations had
                        // all finished. This avoid re-laying out the Row with animated width,
                        // which is _sometimes_ desirable. Try removing this modifier and
                        // observe the effect.
                        .skipToLookaheadSize()
                ) {
                    Icon(
                        Icons.Outlined.Share,
                        contentDescription = "Share",
                        modifier =
                            Modifier.padding(
                                top = 10.dp,
                                bottom = 10.dp,
                                start = 10.dp,
                                end = 20.dp,
                            ),
                    )
                    Icon(
                        Icons.Outlined.Favorite,
                        contentDescription = "Favorite",
                        modifier =
                            Modifier.padding(
                                top = 10.dp,
                                bottom = 10.dp,
                                start = 10.dp,
                                end = 20.dp,
                            ),
                    )
                    Icon(
                        Icons.Outlined.Create,
                        contentDescription = "Create",
                        tint = Color.White,
                        modifier =
                            Modifier.sharedBounds(
                                    rememberSharedContentState(key = "icon_background"),
                                    this@AnimatedVisibility,
                                )
                                .background(selectionColor, RoundedCornerShape(50))
                                .padding(
                                    top = 10.dp,
                                    bottom = 10.dp,
                                    start = 20.dp,
                                    end = 20.dp,
                                )
                                .sharedElement(
                                    rememberSharedContentState(key = "icon"),
                                    this@AnimatedVisibility,
                                ),
                    )
                }
            }
        }
    }
    AnimatedVisibility(
        visible = !expanded,
        enter = EnterTransition.None,
        exit = ExitTransition.None,
    ) {
        Box(modifier = Modifier.fillMaxSize()) {
            Surface(
                Modifier.align(Alignment.BottomEnd)
                    .padding(30.dp)
                    .sharedBounds(
                        rememberSharedContentState(key = "container"),
                        this@AnimatedVisibility,
                        enter = EnterTransition.None,
                    )
                    .sharedBounds(
                        rememberSharedContentState(key = "icon_background"),
                        this@AnimatedVisibility,
                        resizeMode = SharedTransitionScope.ResizeMode.RemeasureToBounds,
                        enter = EnterTransition.None,
                        exit = ExitTransition.None,
                    ),
                shape = RoundedCornerShape(30.dp),
                color = selectionColor,
            ) {
                Icon(
                    Icons.Outlined.Create,
                    contentDescription = "Create",
                    tint = Color.White,
                    modifier =
                        Modifier.padding(30.dp)
                            .size(40.dp)
                            .sharedElement(
                                rememberSharedContentState(key = "icon"),
                                this@AnimatedVisibility,
                            ),
                )
            }
        }
    }
}
```

| Parameters |
|---|---|
| `enabled: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = { isTransitionActive }` | A lambda that determines when the modifier should be active. Defaults to `{ isTransitionActive }`, which enables the modifier only during active shared element transitions |

## Public properties

### isTransitionActive

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

```
val isTransitionActive: Boolean
```

Indicates whether there is any ongoing transition between matched `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)`.