---
title: "animateFloatingActionButton"
description: "Apply this modifier to a [FloatingActionButton] to show or hide it with an animation, typically
based on the app's main content scrolling."
type: "modifier"
---

<div class='type'>Compose Modifier</div>

<a id='references'></a>
<div class='sourceset sourceset-common'>Common</div>


```kotlin
@ExperimentalMaterial3ExpressiveApi
fun Modifier.animateFloatingActionButton(
    visible: Boolean,
    alignment: Alignment,
    targetScale: Float = FloatingActionButtonDefaults.ShowHideTargetScale,
    scaleAnimationSpec: AnimationSpec<Float>? = null,
    alphaAnimationSpec: AnimationSpec<Float>? = null,
): Modifier
```


Apply this modifier to a `FloatingActionButton` to show or hide it with an animation, typically
based on the app's main content scrolling.

#### Parameters

| | |
| --- | --- |
| visible | whether the FAB should be shown or hidden with an animation |
| alignment | the direction towards which the FAB should be scaled to and from |
| targetScale | the initial scale value when showing the FAB and the final scale value when hiding the FAB |
| scaleAnimationSpec | the `AnimationSpec` to use for the scale part of the animation, if null the Fast Spatial spring spec from the `MotionScheme` will be used |
| alphaAnimationSpec | the `AnimationSpec` to use for the alpha part of the animation, if null the Fast Effects spring spec from the `MotionScheme` will be used |




## Code Examples
### AnimatedFloatingActionButtonSample
```kotlin
@OptIn(ExperimentalMaterial3ExpressiveApi::class, ExperimentalMaterial3Api::class)
@Preview
@Composable
fun AnimatedFloatingActionButtonSample() {
    val listState = rememberLazyListState()
    // The FAB is initially shown. Upon scrolling past the first item we hide the FAB by using a
    // remembered derived state to minimize unnecessary compositions.
    val fabVisible by remember { derivedStateOf { listState.firstVisibleItemIndex == 0 } }
    Scaffold(
        floatingActionButton = {
            // A FAB should have a tooltip associated with it.
            TooltipBox(
                positionProvider =
                    TooltipDefaults.rememberTooltipPositionProvider(TooltipAnchorPosition.Above),
                tooltip = { PlainTooltip { Text("Localized description") } },
                state = rememberTooltipState(),
            ) {
                MediumFloatingActionButton(
                    modifier =
                        Modifier.animateFloatingActionButton(
                            visible = fabVisible,
                            alignment = Alignment.BottomEnd,
                        ),
                    onClick = { /* do something */ },
                ) {
                    Icon(
                        Icons.Filled.Add,
                        contentDescription = "Localized description",
                        modifier = Modifier.size(FloatingActionButtonDefaults.MediumIconSize),
                    )
                }
            }
        },
        floatingActionButtonPosition = FabPosition.End,
    ) {
        LazyColumn(state = listState, modifier = Modifier.fillMaxSize()) {
            for (index in 0 until 100) {
                item { Text(text = "List item - $index", modifier = Modifier.padding(24.dp)) }
            }
        }
    }
}
```