fvilarino

        NavHost(
            navController = navController,
            startDestination = "list",
            modifier = Modifier.fillMaxSize(),
            enterTransition = { slideInHorizontally { it } + fadeIn() },
            exitTransition = { slideOutHorizontally { -it } + fadeOut() },
            popEnterTransition = { slideInHorizontally { -it } + fadeIn() },
            popExitTransition = { slideOutHorizontally { it } + fadeOut() },
        ) {
          // omitted

fvilarino

                LoremIpsum(
                    modifier = Modifier
                        .fillMaxWidth()
                        .sharedBounds(
                            rememberSharedContentState(
                                key = "text-$url"
                            ),
                            animatedVisibilityScope,
                        ),
                    maxLines = 3,

fvilarino

                LoremIpsum(
                    modifier = Modifier
                        .fillMaxWidth()
                        .sharedElement(
                            rememberSharedContentState(
                                key = "text-$url"
                            ),
                            animatedVisibilityScope,
                        )
                        .skipToLookaheadSize(),

fvilarino

@Composable
fun SharedTransitionScope.DetailsScreen(
    url: String,
    animatedVisibilityScope: AnimatedVisibilityScope,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
) {
    Column(
        modifier = modifier
            .clickable(

fvilarino

@Composable
fun SharedTransitionScope.ListScreen(
    animatedVisibilityScope: AnimatedVisibilityScope,
    onItemClick: (String) -> Unit,
    modifier: Modifier = Modifier
) {
    LazyColumn(
        modifier = modifier,
        verticalArrangement = Arrangement.spacedBy(8.dp),
        contentPadding = PaddingValues(all = 16.dp),

fvilarino

            composable(
                route = "details/{url}"
            ) { backstackEntry ->
                val encoded = backstackEntry.arguments?.getString("url") ?: error("No URL")
                val url = URLDecoder.decode(encoded, "UTF-8")
                DetailsScreen(
                    url = url,
                    animatedVisibilityScope = this@composable,
                    onClick = { navController.popBackStack() },
                    modifier = Modifier.fillMaxSize(),

fvilarino

@Composable
// 1
fun SharedTransitionScope.DetailsScreen(
    url: String,
    // 2
    animatedVisibilityScope: AnimatedVisibilityScope,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
) {
    Column(

fvilarino

            composable(
                route = "list"
            ) {
                ListScreen(
                    // 1
                    animatedVisibilityScope = this@composable,
                    onItemClick = { item ->
                        val encoded = URLEncoder.encode(item, "UTF-8")
                        navController.navigate("details/$encoded")
                    },

fvilarino

@Composable
// 1
fun SharedTransitionScope.ListScreen(
    // 2
    animatedVisibilityScope: AnimatedVisibilityScope,
    onItemClick: (String) -> Unit,
    modifier: Modifier = Modifier
) {
    LazyColumn(
        modifier = modifier,

fvilarino

@Composable
fun Home(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    // 1
    SharedTransitionLayout(
        modifier = modifier,
    ) {
        NavHost(
            navController = navController,
            startDestination = "list",