Hi guys, I want to scroll frontLayerContent contin...

# compose

[KotlinLeaner]

Hi guys, I want to scroll frontLayerContent continue without interrupt. For example when I started scrolling frontLayerContent, backLayerContent will hide and stop frontLayerContent at top of screen. Then again I have to swipe up gesture to scroll the frontLayerContent. So is this possible to achieve in single gesture?

[KotlinLeaner]

https://youtube.com/shorts/dcYZme52bz0?feature=share

[KotlinLeaner]

In the video you can clearly see that when I started to scroll up the frontLayerContent is stuck at top. After that I scroll up again then it goes i.e. It takes 2 time scroll up gesture to perform scrolling. I want to do this in 1 time only.

[KotlinLeaner]

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun CollapsingTopAppBarStylingScreen() {
    var isBackDropAnimationStarts by remember { mutableStateOf(false) }
    val iconOffsetAnimation: Dp by animateDpAsState(
        if (!isBackDropAnimationStarts) 13.dp else 0.dp, tween(1000)
    )
    val textOffsetAnimation: Dp by animateDpAsState(
        if (!isBackDropAnimationStarts) 6.dp else 0.dp, tween(1000)
    )
    val viewAlpha: Float by animateFloatAsState(
        targetValue = if (!isBackDropAnimationStarts) 1f else 0f, animationSpec = tween(
            durationMillis = 1000,
        )
    )
    val scaffoldState = rememberBackdropScaffoldState(BackdropValue.Revealed)
    BackdropScaffold(
        scaffoldState = scaffoldState,
        appBar = {},
        persistentAppBar = false,
        peekHeight = 0.dp,
        backLayerContent = {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(
                        start = 16.dp, top = 16.dp, bottom = 10.dp
                    ),
            ) {
                Image(
                    modifier = Modifier.padding(top = iconOffsetAnimation),
                    alpha = viewAlpha,
                    imageVector = Icons.Default.ShoppingCart,
                    colorFilter = ColorFilter.tint(color = Color.White),
                    contentDescription = null,
                )
                Text(
                    modifier = Modifier.padding(top = textOffsetAnimation),
                    text = "Hello, Anna",
                    fontSize = 20.sp,
                    color = Color.White.copy(alpha = viewAlpha),
                )
            }
        },
        backLayerBackgroundColor = Color.DarkGray,
        frontLayerBackgroundColor = Color.White,
        frontLayerScrimColor = Color.Transparent,
        frontLayerContent = {
            LazyColumn(
                contentPadding = PaddingValues(horizontal = 24.dp, vertical = 24.dp),
                verticalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                val list = (0..40).map { it.toString() }
                items(count = list.size) {
                    Text(
                        text = list[it],
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(top = 10.dp),
                        color = Color.Black,
                    )
                }
            }
        })
}