A modern programming language that makes developers happier.

kotlinlang

Hi
i am using the compose backdrop
```BackdropScaffold```
there are a number of features i do not like and would like to customise
1). when the back layer is open the user cannot interact with the frontlayer. is there any way i can enable frontlayer interactions while the backdrop is open?
2). i would like to animate the transition between Hamburger and Cross icon, however i cannot see how to achieve this.
3). I have added my own animation for conceal/reveal of the back layer which i like however it has made the transition between the hamburger and cross icon very "sluggish"
what have i done wrong?

device-2022-06-29-111756.mp4

```val scaffoldState = rememberBackdropScaffoldState(
    initialValue = BackdropValue.Concealed, animationSpec = spring(
        dampingRatio = Spring.DampingRatioMediumBouncy,
        stiffness = Spring.StiffnessLow
    )
)
val scope = rememberCoroutineScope()

BackdropScaffold(
    backLayerBackgroundColor = MaterialTheme.colorScheme.secondary,
    backLayerContentColor = MaterialTheme.colorScheme.onSecondary,
    scaffoldState = scaffoldState,
    appBar = { ShowcaseAppBar(scaffoldState, scope) },
    backLayerContent = { ShowcaseBackLayerContent() },
    frontLayerContent = { ShowcaseFrontLayerContent() },
    peekHeight = 60.dp,
) {

}```


```SmallTopAppBar(
    title = {
        Text(text = "Showcase", style = MaterialTheme.typography.titleMedium, color = MaterialTheme.colorScheme.onSurface)
    },
    navigationIcon = {
        if (scaffoldState.isConcealed) {
            IconButton(
                onClick = {
                    scope.launch { scaffoldState.reveal() }
                }
            ) {
                Icon(
                    <http://Icons.Default.Menu|Icons.Default.Menu>,
                    contentDescription = "Menu"
                )
            }
        } else {
            IconButton(
                onClick = {
                    scope.launch { scaffoldState.conceal() }
                }
            ) {
                Icon(
                    Icons.Default.Close,
                    contentDescription = "Close"
                )
            }
        }
    },
    actions = {
        IconButton(onClick = { Timber.e("Display Overflow app bar actions") }) {
            Icon(
                imageVector = Icons.Rounded.MoreVert,
                contentDescription = "Localized description"
            )
        }
    }
)```


setting the frontlayerscrim colour to unspecified enables interaction with the frontlayer

```BackdropScaffold(
    backLayerBackgroundColor = MaterialTheme.colorScheme.secondary,
    backLayerContentColor = MaterialTheme.colorScheme.onSecondary,
    scaffoldState = scaffoldState,
    appBar = { ShowcaseAppBar(scaffoldState, scope) },
    backLayerContent = { ShowcaseBackLayerContent() },
    frontLayerContent = { ShowcaseFrontLayerContent() },
    frontLayerScrimColor = Color.Unspecified,
    peekHeight = 60.dp,
)```


however i have an issue that my frontlayer contains a list of items and when i try to scroll the list it closes the backdrop
instead of scrolling down the list items

also found that....

```gesturesEnabled = false,```
disables scrolling the frontlayer to close,

now all i have to fix is the performance issues with animating the transition between the hamburger and close icons

Would you mind filing these as separate issues in the Material component? :slightly_smiling_face:
<https://issuetracker.google.com/issues?q=status:open%20componentid:742043&amp;s=created_time:desc>