What is the animation of the bottom sheet in Jetpack Compose?

edit

In Jetpack Compose, the animation of the bottom sheet is achieved using the AnimatedVisibility and Modifier.offset functions.

First, we set up the bottom sheet layout with its initial state using a Scaffold composable:

Scaffold(
    bottomSheet = {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(200.dp)
        ) {
            // content of the bottom sheet
        }
    }
) {
    // rest of the screen content
}

To animate the visibility of the bottom sheet, we wrap the Box composable inside an AnimatedVisibility composable and set its visibility state:

var bottomSheetVisible by remember { mutableStateOf(false) }

Scaffold(
    bottomSheet = {
        AnimatedVisibility(
            visible = bottomSheetVisible,
            modifier = Modifier
                .fillMaxWidth()
                .height(200.dp)
        ) {
            Box(
                modifier = Modifier
                    .background(Color.White)
            ) {
                // content of the bottom sheet
            }
        }
    }
) {
    // rest of the screen content
}

Finally, to animate the position of the bottom sheet as it appears or disappears, we add a Modifier.offset to the Box composable and update its value based on the visibility state:

val sheetOffset = 200.dp

Scaffold(
    bottomSheet = {
        AnimatedVisibility(
            visible = bottomSheetVisible,
            modifier = Modifier
                .fillMaxWidth()
                .height(sheetOffset)
                .offset {
                    IntOffset(
                        x = 0,
                        y = if (bottomSheetVisible) 0 else sheetOffset.roundToPx()
                    )
                }
        ) {
            Box(
                modifier = Modifier
                    .background(Color.White)
            ) {
                // content of the bottom sheet
            }
        }
    }
) {
    // rest of the screen content
}

This will animate the bottom sheet in and out of the screen with a slide-up and slide-down motion.