---
title: "animateOffsetAsState"
description: "Fire-and-forget animation function for [Offset]. This Composable function is overloaded for
different parameter types such as [Dp], [Color][androidx.compose.ui.graphics.Color], [Float],
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.

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

Note, [animateOffsetAsState] cannot be canceled/stopped without removing this composable function
from the tree. See [Animatable] for cancelable animations."
type: "composable"
---

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


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

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


```kotlin
@Composable
public fun animateOffsetAsState(
    targetValue: Offset,
    animationSpec: AnimationSpec<Offset> = offsetDefaultSpring,
    label: String = "OffsetAnimation",
    finishedListener: ((Offset) -> Unit)? = null,
): State<Offset>
```


Fire-and-forget animation function for `Offset`. This Composable function is overloaded for
different parameter types such as `Dp`, `Color`, `Float`,
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.

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

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

#### Parameters

| | |
| --- | --- |
| targetValue | Target value of the animation |
| animationSpec | The animation that will be used to change the value through time. Physics animation will be used by default. |
| 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 animateOffsetAsState(
    targetValue: Offset,
    animationSpec: AnimationSpec<Offset> = offsetDefaultSpring,
    finishedListener: ((Offset) -> Unit)? = null,
): State<Offset>
```



## Code Examples
### AnimateOffsetSample
```kotlin
@Composable
@Suppress("UNUSED_VARIABLE")
fun AnimateOffsetSample() {
    @Composable
    fun OffsetAnimation(selected: Boolean) {
        // Animates the offset depending on the selected flag.
        // [animateOffsetAsState] returns a State<Offset> object. The value of the State object is
        // updated by the animation. Here we use that State<Offset> as a property delegate.
        val offset: Offset by
            animateOffsetAsState(if (selected) Offset(0f, 0f) else Offset(20f, 20f))
        // In this example, animateIntOffsetAsState returns a State<IntOffset>. The value of the
        // returned
        // State object is updated by the animation.
        val intOffset: IntOffset by
            animateIntOffsetAsState(if (selected) IntOffset(0, 0) else IntOffset(50, 50))
    }
}
```