Continued at mxalbert1996/compose-shared-elements.

Proof of concept exploration of how to implement SharedElement transition in Jetpack Compose.
Inspired by Flutter Hero widget.

Transition consists of following animations:

• Position
• Scale
• Crossfade (which makes it work on any kind of element, e.g. Text)

UsersListScreen: UserDetailScreen:	Slowed down transition animation:

1. Define elements with the same key and different screen keys

@Composable
fun ScreenA() {
  // ...
  
    SharedElement(key = "key", screenKey = "A") {
        Image(image, Modifier.preferredSize(48.dp))
    }
  
  // ...
}

@Composable
fun ScreenB() {
  // ...
  
    SharedElement(key = "key", screenKey = "B") {
        Image(image, Modifier.preferredSize(200.dp))
    }
    
  // ...
}

2. Make SharedElementsRoot a common parent of ScreenA and ScreenB. It doesn't have to be their direct parent.

SharedElementsRoot {
    // change between ScreenA and ScreenB
}

3. Transition starts automatically when second SharedElement is detected

See sample usage with UsersListScreen and UserDetailsScreen here.

Considering the experimental state of this library and state of Jetpack Compose itself there are some issues described here.