A modern programming language that makes developers happier.

kotlinlang

How do I create a bounce animation? I want to scale some text to 1.2 and then back to 1.0, with spring animation both ways.

I currently have something like this:
```var bounce by remember{ mutableStateOf(false) }
Button(onClick = { bounce = true })
val scale by animateFloatAsState(
    targetValue = if (bounce) 1.2f else 1.0f,
    finishedListener = {
        bounce = false
    }
}
Text("Text", modifier = Modifier.scale(scale))```

The problem is that if the button is pressed exactly as the scale reaches 1.2f, what happens is the `finishedListener` is called and sets `bounce=false` and immediately after that `onClick` is called and sets `bounce=true`. Since scale is already at 1.2, it gets stuck there.

With `animationSpec` parameter
<https://developer.android.com/jetpack/compose/animation#customize-animations>

animation spec only controls how the value transitions from current to the target

I've never actually used it but it looks like you need `Animatable`. It has `suspend animateTo()` function so in your case you could write something like this:
```scope.launch {
  bounce.animateTo(1.2f)
  bounce.animateTo(1f)
}```


Thanks, I’ll take a look at `Animatable`

:wave: Did `Animatable` work out for you?

Yes, worked great, thanks:
```    val scale = remember { Animatable(1.0f) }
    val coroutineScope = rememberCoroutineScope()
    if (highlight){
        coroutineScope.launch {
            val animationSpec = spring&lt;Float&gt;(
                dampingRatio = Spring.DampingRatioLowBouncy,
                stiffness = (0.9f * Spring.StiffnessMedium + 0.1f * Spring.StiffnessHigh)
            )
            scale.animateTo(1.1f, animationSpec = animationSpec)
            scale.animateTo(1.0f, animationSpec = animationSpec)
        }
    }
    Text(
        text = text,
        color = MaterialTheme.colors.error,
        style = MaterialTheme.typography.caption,
        modifier = Modifier.scale(scale.value)
    )```