`````` I don't understand why the animation works ...

# compose

[Nat Strangerweather]

```
I don't understand why the animation works when I select the button but not when I deselect it. Any ideas? Here is my code. Also, are there any animation effects, like bouncing etc out of the box, or do they have to be implemented from scratch?
```var isSelected = selectedIndex.value == index
val scale = animate(if (isSelected) 1f else 0f)

            if (color != null) {
                Column(
                    Modifier.fillMaxWidth(), horizontalAlignment = CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    Box(Modifier.fillMaxWidth(), Center) {
                        Card(
                            backgroundColor = color,
                            modifier = Modifier.size(100.dp)
                                .padding(10.dp)
                                .clip(CircleShape)
                                .clickable(
                                    indication = null,
                                    onClick = {
                                        selectedIndex.value = index
                                        isSelected = !isSelected
                                    }
                                )
                        ) {
                            Box(Modifier.fillMaxSize(), Center) {
                                when (index) {
                                    0 -> Icon(alarm)
                                    1 -> Icon(mediaSounds)
                                    2 -> Icon(touchSounds)
                                    3 -> Icon(Icons.Rounded.Notifications)
                                    4 -> Icon(events)
                                    5 -> Icon(Icons.Rounded.Email)
                                }
                            }
                        }
                        Box(Modifier.fillMaxSize(), Center) {
                            OptionsPopUp(scale = scale, color = color)
                        }
                    }
                    Text(text = string, style = typography.subtitle2)
                }
            }
        }
    }
}

[Doris Liu]

The problem here is isSelected is not remembered, so when in the next composition, it initialized again. That's why isSelected = !isSelected doesn't work as you anticipated. You could do something like var isSelected by remember { mutableStateOf(selectedIndex.value == index) }

[Doris Liu]

As for bouncing out of the box, you could accomplish that with a bouncy spring: val scale = animate(if (isSelected) 1f else 0f, spring(dampingRatio = Spring.DampingRatioHighBouncy) If it's too bouncy, you could play with the damping ratio/stiffness to find a bounciness to your liking. 🙂

[Nat Strangerweather]

wonderful, may thanks for this! 🙂

[Nat Strangerweather]

@Doris Liu The bouncing animation is perfect! Cheers!