---
title: "AnimatedText"
description: "A composable that displays an animated text."
type: "component"
---

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



A composable that displays an animated text.

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

<div class='sourceset sourceset-android'>Android</div>


```kotlin
@Composable
@RequiresApi(31)
public fun AnimatedText(
    text: String,
    fontRegistry: AnimatedTextFontRegistry,
    progressFraction: () -> Float,
    modifier: Modifier = Modifier,
    contentAlignment: Alignment = Alignment.Center,
)
```


#### Parameters

| | |
| --- | --- |
| text | The text to be displayed. |
| fontRegistry | The font registry to be used to animate the text. |
| progressFraction | A provider for the current state of the animation. Provided value should be between 0f and 1f, but might go beyond in some cases such as overshooting spring animations. |
| modifier | Modifier to be applied to the composable. |
| contentAlignment | Alignment within the bounds of the Canvas. |






## Code Examples
### AnimatedTextSample
```kotlin
@Composable
fun AnimatedTextSample() {
    val scope = rememberCoroutineScope()
    val animatable = remember { Animatable(0f) }
    val animate = {
        scope.launch {
            // Animate from 0 to 1 and then back to 0.
            animatable.animateTo(1f)
            animatable.animateTo(0f)
        }
    }
    val animatedTextFontRegistry =
        rememberAnimatedTextFontRegistry(
            // Variation axes at the start of the animation, width 10, weight 200
            startFontVariationSettings =
                FontVariation.Settings(FontVariation.width(10f), FontVariation.weight(200)),
            // Variation axes at the end of the animation, width 100, weight 500
            endFontVariationSettings =
                FontVariation.Settings(FontVariation.width(100f), FontVariation.weight(500)),
            startFontSize = 30.sp,
            endFontSize = 40.sp,
        )
    AnimatedText(
        text = "Hello!",
        fontRegistry = animatedTextFontRegistry,
        // Content alignment anchors the animation at the vertical center, expanding horizontally
        contentAlignment = Alignment.CenterStart,
        progressFraction = { animatable.value },
        modifier = Modifier.clickable(onClick = { animate() }),
    )
    LaunchedEffect(Unit) { animate() }
}
```
### AnimatedTextSampleButtonResponse
```kotlin
@Composable
fun AnimatedTextSampleButtonResponse() {
    val scope = rememberCoroutineScope()
    val animatedTextFontRegistry =
        rememberAnimatedTextFontRegistry(
            // Variation axes at the start of the animation, width 10, weight 200
            startFontVariationSettings =
                FontVariation.Settings(FontVariation.width(10f), FontVariation.weight(200)),
            // Variation axes at the end of the animation, width 100, weight 500
            endFontVariationSettings =
                FontVariation.Settings(FontVariation.width(100f), FontVariation.weight(500)),
            startFontSize = 30.sp,
            endFontSize = 30.sp,
        )
    val number = remember { mutableIntStateOf(0) }
    val textAnimatable = remember { Animatable(0f) }
    Row(verticalAlignment = Alignment.CenterVertically) {
        Button(
            modifier = Modifier.padding(horizontal = 16.dp),
            onClick = {
                number.value -= 1
                scope.launch {
                    textAnimatable.animateTo(1f)
                    textAnimatable.animateTo(0f)
                }
            },
            label = {
                Text(modifier = Modifier.semantics { contentDescription = "Decrease" }, text = "-")
            },
        )
        AnimatedText(
            text = "${number.value}",
            fontRegistry = animatedTextFontRegistry,
            progressFraction = { textAnimatable.value },
        )
        Button(
            modifier = Modifier.padding(horizontal = 16.dp),
            onClick = {
                number.value += 1
                scope.launch {
                    textAnimatable.animateTo(1f)
                    textAnimatable.animateTo(0f)
                }
            },
            label = {
                Text(modifier = Modifier.semantics { contentDescription = "Increase" }, text = "+")
            },
        )
    }
}
```
### AnimatedTextSampleSharedFontRegistry
```kotlin
@Composable
fun AnimatedTextSampleSharedFontRegistry() {
    val animatedTextFontRegistry =
        rememberAnimatedTextFontRegistry(
            // Variation axes at the start of the animation, width 50, weight 300
            startFontVariationSettings =
                FontVariation.Settings(FontVariation.width(50f), FontVariation.weight(300)),
            // Variation axes at the end of the animation are the same as the start axes
            endFontVariationSettings =
                FontVariation.Settings(FontVariation.width(50f), FontVariation.weight(300)),
            startFontSize = 15.sp,
            endFontSize = 25.sp,
        )
    val firstAnimatable = remember { Animatable(0f) }
    val secondAnimatable = remember { Animatable(0f) }
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        AnimatedText(
            text = "Top Text",
            fontRegistry = animatedTextFontRegistry,
            progressFraction = { firstAnimatable.value },
        )
        AnimatedText(
            text = "Bottom Text",
            fontRegistry = animatedTextFontRegistry,
            progressFraction = { secondAnimatable.value },
        )
    }
    LaunchedEffect(Unit) {
        firstAnimatable.animateTo(1f)
        firstAnimatable.animateTo(0f)
        secondAnimatable.animateTo(1f)
        secondAnimatable.animateTo(0f)
    }
}
```