---
title: "animateValueAsState"
description: "Fire-and-forget animation function for any value. 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.

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

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

 data class MySize(val width: Dp, val height: Dp)"
type: "composable"
---

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


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

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


```kotlin
@Composable
public fun <T, V : AnimationVector> animateValueAsState(
    targetValue: T,
    typeConverter: TwoWayConverter<T, V>,
    animationSpec: AnimationSpec<T> = remember { spring() },
    visibilityThreshold: T? = null,
    label: String = "ValueAnimation",
    finishedListener: ((T) -> Unit)? = null,
): State<T>
```


Fire-and-forget animation function for any value. 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.

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

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

 data class MySize(val width: Dp, val height: Dp)

#### Parameters

| | |
| --- | --- |
| targetValue | Target value of the animation |
| typeConverter | A `TwoWayConverter` to convert from the animation value from and to an `AnimationVector` |
| animationSpec | The animation that will be used to change the value through time. Physics animation will be used by default. |
| visibilityThreshold | An optional threshold to define when the animation value can be considered close enough to the targetValue to end the animation. |
| 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 <T, V : AnimationVector> animateValueAsState(
    targetValue: T,
    typeConverter: TwoWayConverter<T, V>,
    animationSpec: AnimationSpec<T> = remember { spring() },
    visibilityThreshold: T? = null,
    finishedListener: ((T) -> Unit)? = null,
): State<T>
```



## Code Examples
### ArbitraryValueTypeTransitionSample
```kotlin
@Composable
fun ArbitraryValueTypeTransitionSample() {
    @Composable
    fun ArbitraryValueTypeAnimation(enabled: Boolean) {
        // Sets up the different animation target values based on the [enabled] flag.
        val mySize =
            remember(enabled) {
                if (enabled) {
                    MySize(500.dp, 500.dp)
                } else {
                    MySize(100.dp, 100.dp)
                }
            }
        // Animates a custom type value to the given target value, using a [TwoWayConverter]. The
        // converter tells the animation system how to convert the custom type from and to
        // [AnimationVector], so that it can be animated.
        val animSize: MySize by
            animateValueAsState(
                mySize,
                TwoWayConverter<MySize, AnimationVector2D>(
                    convertToVector = { AnimationVector2D(it.width.value, it.height.value) },
                    convertFromVector = { MySize(it.v1.dp, it.v2.dp) },
                ),
            )
        Box(Modifier.size(animSize.width, animSize.height).background(color = Color.Red))
    }
}
```