From the docs I found the following sample code:

Sometimes you might want your non-shared composable to animate away as well as remain on top of the other composables before the transition. In such cases, use renderInSharedTransitionScopeOverlay().animateEnterExit() to animate the composable out as the shared element transition runs:

JetsnackBottomBar(
    modifier = Modifier
        .renderInSharedTransitionScopeOverlay(
            zIndexInOverlay = 1f,
        )
        .animateEnterExit(
            enter = fadeIn() + slideInVertically {
                it
            },
            exit = fadeOut() + slideOutVertically {
                it
            }
        )
)

Also usage in the sample project.

But when I try it animateEnterExit is unresolved:

with(sharedTransitionScope) {
    BottomCard(
        modifier = Modifier
            .renderInSharedTransitionScopeOverlay(
                zIndexInOverlay = Float.MAX_VALUE,
            )
            .animateEnterExit(
                enter = fadeIn() + slideInVertically {
                    it
                },
                exit = fadeOut() + slideOutVertically {
                    it
                }
            ),
    )
}

composeBom = "2025.01.01"

From the docs I found the following sample code:

Sometimes you might want your non-shared composable to animate away as well as remain on top of the other composables before the transition. In such cases, use renderInSharedTransitionScopeOverlay().animateEnterExit() to animate the composable out as the shared element transition runs:

JetsnackBottomBar(
    modifier = Modifier
        .renderInSharedTransitionScopeOverlay(
            zIndexInOverlay = 1f,
        )
        .animateEnterExit(
            enter = fadeIn() + slideInVertically {
                it
            },
            exit = fadeOut() + slideOutVertically {
                it
            }
        )
)

Also usage in the sample project.

But when I try it animateEnterExit is unresolved:

with(sharedTransitionScope) {
    BottomCard(
        modifier = Modifier
            .renderInSharedTransitionScopeOverlay(
                zIndexInOverlay = Float.MAX_VALUE,
            )
            .animateEnterExit(
                enter = fadeIn() + slideInVertically {
                    it
                },
                exit = fadeOut() + slideOutVertically {
                    it
                }
            ),
    )
}

composeBom = "2025.01.01"

• android
• android-jetpack-compose
• android-animation
• jetpack-compose-animation
• android-jetpack-compose-animation

1 Answer 1

Found the answer animateEnterExit is within the AnimatedVisibility scope:

https://developer.android.com/develop/ui/compose/animation/composables-modifiers#animatedvisibility-enter-exit

Update:

And not just AnimatedVisibility, also AnimatedContent

And we can use: with(animatedContentScope) { } which we get from NavHost's composable: https://developer.android.com/develop/ui/compose/animation/shared-elements/navigation