Jetpack compose Shared element transition

This is a simple application that aims to demonstrate the shared element transition animation using Jetpack compose and Compose navigation

sahred.element.transition.mp4

I also customized the NavHost animations to make the transition smoother.

The shared element transition is achieved using the .sharedElement modifier on both the start and target elements.

        .sharedElement(
            state = rememberSharedContentState(key = "key"), // Element identifier
            animatedVisibilityScope = animatedContentScope, // Animation scope
        )

Further info is available on the documentation page.