---
title: "animateFloatAsState"
description: "Fire-and-forget animation function for [Float]. This Composable function is overloaded for
different parameter types such as [Dp], [Color][androidx.compose.ui.graphics.Color], [Offset],
etc. When the provided [targetValue] is changed, the animation will run automatically. If there
is already an animation in-flight when [targetValue] changes, the on-going animation will adjust
course to animate towards the new target value.

[animateFloatAsState] returns a [State] object. The value of the state object will continuously
be updated by the animation until the animation finishes.

Note, [animateFloatAsState] cannot be canceled/stopped without removing this composable function
from the tree. See [Animatable] for cancelable animations.

[visibilityThreshold] can be used to define when the animation value is considered close enough
to the [targetValue] to finish. By default, the [visibilityThreshold] in the [animationSpec] will
be respected. If a non-default [visibilityThreshold] is provided, it will override the visibility
threshold in the [animationSpec] if it's a [SpringSpec]."
type: "composable"
---

<div class='type'>Composable Function</div>


<a id='references'></a>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@Composable
public fun animateFloatAsState(
    targetValue: Float,
    animationSpec: AnimationSpec<Float> = defaultAnimation,
    visibilityThreshold: Float = DefaultFloatVisibilityThreshold,
    label: String = "FloatAnimation",
    finishedListener: ((Float) -> Unit)? = null,
): State<Float>
```


Fire-and-forget animation function for `Float`. This Composable function is overloaded for
different parameter types such as `Dp`, `Color`, `Offset`,
etc. When the provided `targetValue` is changed, the animation will run automatically. If there
is already an animation in-flight when `targetValue` changes, the on-going animation will adjust
course to animate towards the new target value.

`animateFloatAsState` returns a `State` object. The value of the state object will continuously
be updated by the animation until the animation finishes.

Note, `animateFloatAsState` cannot be canceled/stopped without removing this composable function
from the tree. See `Animatable` for cancelable animations.

`visibilityThreshold` can be used to define when the animation value is considered close enough
to the `targetValue` to finish. By default, the `visibilityThreshold` in the `animationSpec` will
be respected. If a non-default `visibilityThreshold` is provided, it will override the visibility
threshold in the `animationSpec` if it's a `SpringSpec`.

#### Parameters

| | |
| --- | --- |
| targetValue | Target value of the animation |
| animationSpec | The animation that will be used to change the value through time. `spring` will be used by default. |
| visibilityThreshold | An optional threshold for deciding when the animation value is considered close enough to the targetValue. |
| label | An optional label to differentiate from other animations in Android Studio. |
| finishedListener | An optional end listener to get notified when the animation is finished. |


#### Returns

| | |
| --- | --- |
|  | A `State` object, the value of which is updated by animation. |




<div class='sourceset sourceset-common'>Common</div>


> **Deprecated** animate*AsState APIs now have a new label parameter added.

```kotlin
@Composable
public fun animateFloatAsState(
    targetValue: Float,
    animationSpec: AnimationSpec<Float> = defaultAnimation,
    visibilityThreshold: Float = 0.01f,
    finishedListener: ((Float) -> Unit)? = null,
): State<Float>
```



## Code Examples
### AlphaAnimationSample
```kotlin
@Composable
fun AlphaAnimationSample() {
    @Composable
    fun alphaAnimation(visible: Boolean) {
        // Animates to 1f or 0f based on [visible].
        // This [animateState] returns a State<Float> object. The value of the State object is
        // being updated by animation. (This method is overloaded for different parameter types.)
        // Here we use the returned [State] object as a property delegate.
        val alpha: Float by animateFloatAsState(if (visible) 1f else 0f)
        // Updates the alpha of a graphics layer with the float animation value. It is more
        // performant to modify alpha in a graphics layer than using `Modifier.alpha`. The former
        // limits the invalidation scope of alpha change to graphicsLayer's draw stage (i.e. no
        // recomposition would be needed). The latter triggers recomposition on each animation
        // frame.
        Box(modifier = Modifier.graphicsLayer { this.alpha = alpha }.background(Color.Red))
    }
}
```