SSCompose-SharedElementTransition

Introduction

Google introduced Shared Element Transitions for Jetpack Compose at their 2024 I/O event!

The Shared Element Transition API provides a way to create smooth and visually appealing transitions between composables that share the same UI element. This helps maintain visual continuity and improves the user experience, especially when navigating between different screens.

The Compose UI and animation version 1.7.0-alpha07 introduces primary APIs that allow you to implement the shared element transition.

In this SSCompose-SharedElementTransition, covers sample examples for Shared Element Transition API, which can be useful in regular development through Jetpack Compose.

Required Dependencies

To use the new Shared Element Transition APIs, make sure you use the recent version of Jetpack Compose UI and animation (after 1.7.0-alpha07) like the example below.

You can see the latest version from official documentation

dependencies {
    implementation("androidx.compose.ui:ui:latest_version")
    implementation("androidx.compose.animation:animation:latest_version")
}

Key Components

In Compose, there are a few high level APIs that help you create shared elements:

1. SharedTransitionLayout

   • The outermost layout required to implement Shared Element Transitions.
   • It provides a SharedTransitionScope. Composables need to be in a SharedTransitionScope to use the shared element modifiers.

2. Modifier.sharedElement()

   • The modifier that flags to the SharedTransitionScope the composable that should be matched with another composable.

3. Modifier.sharedBounds()

   • The modifier that flags to the SharedTransitionScope that this composable's bounds should be used as the container bounds for where the transition should take place.
   • In contrast to sharedElement(), sharedBounds() is designed for visually different content.

Shared Element Transition Samples

Shared Element Transition With Navigation	Shared Element Transition Without Navigation	Shared Element Transition With Animated Visibility

Shared Element Transition With Text Transform	Shared Element Transition With Sheet Component	Shared Element Transition With Fab Component

Official Documentations

• Shared Element Transition

Find this samples useful? ❤️

Support it by joining Stargazers for this repository.⭐

How to Contribute 🤝

Whether you're helping us fix bugs, improve the docs, or a feature request, we'd love to have you! 💪 Check out our Contributing-Guide for ideas on contributing.

Bugs and Feedback

For bugs, feature requests, and discussion please use GitHub-Issues.

Awesome Mobile Libraries

• Check out our other available awesome mobile libraries

License

Distributed under the MIT license. See LICENSE for details.