---
title: "animateValue"
description: "Creates an animation of type [T] that runs infinitely as a part of the given
[InfiniteTransition]. Any data type can be animated so long as it can be converted from and to an
[AnimationVector]. This conversion needs to be provided as a [typeConverter]. Some examples of
such [TwoWayConverter] are: [Int.VectorConverter][Int.Companion.VectorConverter],
[Dp.VectorConverter][Dp.Companion.VectorConverter],
[Size.VectorConverter][Size.Companion.VectorConverter], etc

Once the animation is created, it will run from [initialValue] to [targetValue] and repeat.
Depending on the [RepeatMode] of the provided [animationSpec], the animation could either restart
after each iteration (i.e. [RepeatMode.Restart]), or reverse after each iteration (i.e .
[RepeatMode.Reverse]).

If [initialValue] or [targetValue] is changed at any point during the animation, the animation
will be restarted with the new [initialValue] and [targetValue]. __Note__: this means continuity
will *not* be preserved.

A [label] for differentiating this animation from others in android studio."
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> InfiniteTransition.animateValue(
    initialValue: T,
    targetValue: T,
    typeConverter: TwoWayConverter<T, V>,
    animationSpec: InfiniteRepeatableSpec<T>,
    label: String = "ValueAnimation",
): State<T>
```


Creates an animation of type `T` that runs infinitely as a part of the given
`InfiniteTransition`. Any data type can be animated so long as it can be converted from and to an
`AnimationVector`. This conversion needs to be provided as a `typeConverter`. Some examples of
such `TwoWayConverter` are: `Int.VectorConverter`,
`Dp.VectorConverter`,
`Size.VectorConverter`, etc

Once the animation is created, it will run from `initialValue` to `targetValue` and repeat.
Depending on the `RepeatMode` of the provided `animationSpec`, the animation could either restart
after each iteration (i.e. `RepeatMode.Restart`), or reverse after each iteration (i.e .
`RepeatMode.Reverse`).

If `initialValue` or `targetValue` is changed at any point during the animation, the animation
will be restarted with the new `initialValue` and `targetValue`. __Note__: this means continuity
will *not* be preserved.

A `label` for differentiating this animation from others in android studio.



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


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

```kotlin
@Composable
public fun <T, V : AnimationVector> InfiniteTransition.animateValue(
    initialValue: T,
    targetValue: T,
    typeConverter: TwoWayConverter<T, V>,
    animationSpec: InfiniteRepeatableSpec<T>,
): State<T>
```


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


```kotlin
@Composable
public inline fun <S, T, V : AnimationVector> Transition<S>.animateValue(
    typeConverter: TwoWayConverter<T, V>,
    noinline transitionSpec: @Composable Transition.Segment<S>.() -> FiniteAnimationSpec<T> = {
        spring()
    },
    label: String = "ValueAnimation",
    targetValueByState: @Composable (state: S) -> T,
): State<T>
```


Creates an animation of type `T` as a part of the given `Transition`. This means the states of
this animation will be managed by the `Transition`. `typeConverter` will be used to convert
between type `T` and `AnimationVector` so that the animation system knows how to animate it.

`targetValueByState` is used as a mapping from a target state to the target value of this
animation. `Transition` will be using this mapping to determine what value to target this
animation towards. __Note__ that `targetValueByState` is a composable function. This means the
mapping function could access states, CompositionLocals, themes, etc. If the targetValue changes
outside of a `Transition` run (i.e. when the `Transition` already reached its targetState), the
`Transition` will start running again to ensure this animation reaches its new target smoothly.

An optional `transitionSpec` can be provided to specify (potentially different) animation for
each pair of initialState and targetState. `FiniteAnimationSpec` includes any non-infinite
animation, such as `tween`, `spring`, `keyframes` and even `repeatable`, but not
`infiniteRepeatable`. By default, `transitionSpec` uses a `spring` animation for all transition
destinations.

`label` is used to differentiate from other animations in the same transition in Android Studio.

#### Returns

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





## Code Examples
### InfiniteTransitionAnimateValueSample
```kotlin
@Composable
fun InfiniteTransitionAnimateValueSample() {
    // Creates an [InfiniteTransition] instance to run child animations.
    val infiniteTransition = rememberInfiniteTransition()
    // Infinitely animate a Dp offset from 0.dp to 100.dp
    val offsetX by
        infiniteTransition.animateValue(
            initialValue = 0.dp,
            targetValue = 100.dp,
            typeConverter = Dp.VectorConverter,
            animationSpec =
                infiniteRepeatable(
                    animation =
                        keyframes {
                            durationMillis = 500
                            0.dp at 200 // ms
                            80.dp at 300 using FastOutLinearInEasing
                        }
                    // Use the default RepeatMode.Restart to start from 0.dp after each iteration
                ),
        )
    Box(Modifier.offset(x = offsetX)) {
        // Content goes here
    }
}
```